LESS

introduction

Joost v@n Meeteren

Less - links

CSS-TRICKS.com - Useful CSS3 LESS Mixins.

Designshack.net - Using Less.js to Simplify Your CSS3.

Hongkiat.com - LESS CSS - Beginner's Guide.

Lesscss.org - {less} - Getting Started.

Wikipedia - Less (stylesheet language).

Crunch! - The LESS editor ....

LESS Elements.

WinLess.

Less - Introduction

{less}

Getting Started

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. ...

See Lesscss.org - {less} - Getting Started for more.

To make sure your LESS code compiles correctly, throw the following code into the head of your HTML.

<link rel="stylesheet/less" href="style.less" type="text/css">
<script src="less.js"></script>

Notice that the typical rel="stylesheet" has become rel="stylesheet/less" ...

See Designshack.net - Using Less.js to Simplify Your CSS3 for more.

Less - Example stylesheet


From elements.less:

.rounded(@radius: 2px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

Written in a different way:

@radius: 2px;

.rounded {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}

Less - less layout

An example with layout in Less: LESS - less layout.

Joost van Meeteren Websites
2002-2024 © Joost van Meeteren, Bennekom NL
Laatste update website: vrijdag 26 april 2024