Less CSS makes organizing, writing and managing your CSS code a breeze.
Although the CSS 1 specification was completed in 1996, it was not until 2000 that most major browsers fully implemented it. Ever since, we have all come to know and appreciate cascading style sheets. CSS rocks.
But…
The kind of logic that even the most basic programming languages enjoy is still absent from CSS. Granted, CSS is not a programming language, but with the kinds of challenges that today’s web developers face, concepts such as variables, functions and nested logic are difficult to live without in CSS. The end result is a syntax that quickly yields to unnecessary repetition and does not, by nature, allow you to mirror the very DOM you are styling. In addition, your CSS code base can quickly become large and difficult to manage.
Enter Less CSS.
This CSS preprocessor brilliantly allows you to employ the kind of structure and logic found in virtually any programming language. The syntax is easy to understand, it mimics your DOM structure and it allows you to keep your code base clean.
Two Implementation Methods
There are two ways that you can implement Less CSS: client-side or compiled. For the sake of simplicity, we will look at the client-side implementation and cover the compiled approach in a later post. Client-side implementation of Less CSS is not recommended for a large code base. In theory, it is inefficient and can quickly slow your page down. But it is perfect for getting to know Less CSS and for simple testing.
Client-side implementation is achieved in two steps. First, rename your .css file to .less. Also, in the LINK tag, change the “rel” attribute from “stylesheet” to “stylesheet/less”. Second, after your LINK tag that points to your .less file, pull in less.js via a SCRIPT tag. That’s it. Brilliant.
Example # 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* normal CSS */ h1,div{ width:800px; margin:25px auto; } h1{ text-align: center; font:bold 22px Verdana,Arial,Sans; color:#444; } div{ padding:10px; } /* LESS CSS starts here */ .foo{ background-color:#ccc; border:1px solid blue; h2{ color:red; } } .bar{ background-color:yellow; border:1px solid #fc0000; overflow:auto; h2{ color:blue; } } |
Example # 1 starts out by illustrating one very important point: Less CSS is a superset of CSS. This means that any valid CSS will work just fine in a .less file. In fact, there is no reason why you would not write normal CSS in a .less file. There are certainly situations where it makes perfect sense. For example, if I want all H1 and DIV tags to be 800px wide and have a top/bottom margin of 25px, then it just makes sense to say h1,div{ width:800px; margin:25px auto; }.
Nothin’ wrong with that!
The power of Less CSS really becomes apparent when you have a rule that forks. Once you start to write rules like this in CSS, things become inefficient:
|
1 2 3 4 5 6 7 8 9 |
.foo{ background-color:#ccc; border:1px solid blue; } .foo h2{ color:red; } |
Here we have referred to the “foo” class twice. Example # 1 illustrates how, by nesting our rules, we can refer to .foo only once, but define not only the style of the class, but any H2 elements that are descendants of that class. The same goes for the “bar” class.
Here is a link to a fully-functioning page from Example # 1:
http://sub1.kevinchisholm.com/blog/examples/less-css-example-1.html
Example # 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* LESS CSS starts here */ .foo{ background-color:#ccc; border:1px solid blue; &:hover{ background-color:green; cursor:pointer; } h2{ color:red; &.ital{ font-style:italic; } } } |
In Example # 2, we see the use of the ampersand (“&”). This character is used to indicate the following kind of relationships:
- div.className
- p#idName
- a:hover
- ul:nth-child()
- etc…
What’s happening here is that when we don’t use the ampersand, then the nested rule indicates a descendant. So, “div .foo” means “any element with the class foo that is a descendant of any DIV element.” But what if we want to indicate “any DIV element with the foo class?” Then we use the ampersand:
|
1 2 3 4 5 |
div { &.foo{ color: red; } } |
Here is a link to a fully-functioning page from Example # 2:
http://sub1.kevinchisholm.com/blog/examples/less-css-example-2.html
Example # 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
@red: #A52A2A; @gray: #444; @blue: #008080; @black: #000; @tomato: #FF6347; @yellow: #DAA520; @babyBlue: #7FFFD4; @light-gray: #ccc; @StdWidth: 600px; @wide: 800px; @narrow: 400px; /* mix-ins */ .center(@howWide: @StdWidth){ width:@howWide; margin:25px auto; } .backColor(@color){ background-color:@color; } .onePxSolidBorder(@brdColor: @black){ border: 1px solid @brdColor; } .setFont(@weight: normal, @size: 18px, @family: 'Verdana,Arial,Sans'){ font: @weight @size @family; } /* rules */ h1{ .center(@StdWidth); .onePxSolidBorder; text-align: center; .setFont(bold,44px); color: @gray; } div{ padding:10px; } .foo{ .center(@narrow); .backColor(@light-gray); .onePxSolidBorder(@blue); &:hover{ .backColor(@tomato); cursor:pointer; } h2{ .setFont(bold,22px,courier); color:@red; &.ital{ font-style:italic; } } p{ .setFont(normal,18px,Times); } } .bar{ .center(@wide); .backColor(@yellow); .onePxSolidBorder(@red); overflow: auto; h2{ color: @blue; } p{ .setFont(normal,18px,Arial); } li{ .backColor(@babyBlue); .onePxSolidBorder(@red); .setFont(normal,14px,courier); list-style:none; float:left; margin-left:10px; padding:5px; } } |
In Example # 3, we introduce two new concepts: variables and mixins.
Less CSS Variables
Variables in Less CSS are indicated by preceding the variable name with the “at” symbol (otherwise known as an ampersat). You then initialize that variable as if you were writing a CSS rule. It is important to note that in Less CSS, variable values cannot change during the life of the page; once you define a variable, the value you have assigned it remains fixed.
Less CSS Mixins
I like to think of Less CSS Mixins as functions. In my opinion, the syntax is similar to a JavaScript function:
|
1 2 3 4 5 6 7 |
.mixinName(@argument-1: value,@argument-1: value){ propertyName1: @argument-1; propertyName2: @argument-2; propertyName3: normalCSSValue; propertyName4: normalCSSValue; //etc... } |
In the above Less CSS mixin, the arguments are optional. If you include an argument, you must initialize it. But, you do not have to use the argument inside of the mixin, nor do you have to pass-in the argument when calling the mixin. The mixin simply does whatever you tell it to do (i.e. it returns whatever CSS you define inside of it). The power of the mixin is that you can pass it a value as an argument, and this will override the initialized value.
You’ll also notice the last line inside of the mixin: “//etc…”. This is a Less CSS comment. While you can always use valid CSS comment syntax /* comment */ you can also use the double-slash syntax that is found in JavaScript: “//comment”
Here is a link to a fully-functioning page from Example # 3:
http://sub1.kevinchisholm.com/blog/examples/less-css-example-3.html
Summary
In this article, we covered the absolute basics of Less CSS. We learned what Less CSS is and about simple client-side implementation. We also covered nested rules, variables and mixins. These are the very basics of Less CSS and there is much more to discover and talk about.
Helpful Links for Less CSS basics
