CSS is plain and simple but it’s time for dynamic CSS with the help of LESS.
So, what is less?
LESS is a superset of CSS. This means that all CSS code is valid LESS code but there are additional elements in LESS which would not be valid in CSS. This is great because your existing CSS is already valid LESS code, minimizing the learning curve to using LESS.
LESS adds much needed dynamic properties to CSS. It introduces variables, operations, function-like elements, even JavaScript into the mix. It will make your life hassle free by enabling you to write style-sheets with a modular mindset.
How to use less?
There are two ways to use less the first one is to convert it on demand using a JavaScript file or you can pre-compile it and use the resulting CSS file. Firstly, you have to link it to your website, you need to include the following inside the header of your HTML.
<script src="less.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="style.less">
Compiling the LESS file
LESS works by taking all the LESS code you write and converting it to CSS on the fly. Instead of doing this on demand we can convert our LESS file, save the CSS output and use that instead of doing the on-demand conversion on each page load. You will need an application for compiling the LESS file.
- For Windows user download the application from here (http://winless.org/)
- For Mac user download the application from here (http://incident57.com/less/)
Finally, let’s gets started..
Variables work exactly the same way as in the programming languages. You can use and store the value instead.
Example
@header-font: Georgia;
h1, h2, h3, h4 {
font-family: @header-font;
}
.large {
font-family:@header-font;
}
In the example above we defined the @header-font variable and assigned the value “Georgia” to it. We can now use this variable whenever we want to use the Georgia font. If we decide we’d rather go with Trebuchet MS as our heading font we don’t need to go through our whole file, we just change the value of the variable.
Variable scope refers to the places where it is available. If you define a variable at the very start of your LESS file it will be available to any code you write after it. You can also define a variable inside a CSS rule. In this case the variable is not available outside of this ruleset; it can only be used locally.
a {
@color: #ff9900;
color:@color;
}
button {
background: @color;
}
Constants VS Variables constants can only defined once and used only within the code. Variables can be used from top to the end of your code.
.button{
@unit: 3px;
border:@unit solid #ddd;
padding: @unit * 3;
margin: @unit * 2;
}
The above code defines a the variable @unit as 3px. It then goes on to define the border as having exactly that width, the padding to have three times that width and the margin as having twice that width.
Color functions, there is a lot more that you can do with colors; LESS allows you to manipulate them on a channel level. You can lighten, darken, saturate, desaturated, fade in, fade out and spin colors. Take a look at the following examples and images to see what each of these do.
@color: #3d82d1;
.left_box {
background:lighten(@color, 20%);
}
.right_box {
background:darken(@color, 20%);
}
Nesting, when writing CSS you use a cascading style. To change the margin of paragraphs inside blog posts only you could use the following code.
article.post p{
margin: 0 0 12px 0;
}
In LESS we can nest like this:
article.post {
p{
margin: 0 0 12px 0;
}
a {
color: red;
}
a:hover {
color: blue;
}
img {
float:left;
}
}
Mixins, is the feature which save you the most typing. For example if you wanted to create rounder border on the top left and right corners you needed each time to duplicate the code below:
.tab {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
With LESS you can save a lot of time by creating mixin, which are reusable elements which you can add as a rule to any other element. An example is provided below:
.rounded_top {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tab {
background: #333;
color:#fff;
.rounded_top;
}
.submit {
.rounded_top;
}
The above example shows that the rounded_top was assigned to tab and finally to submit. Therefore all the rules are imported to submit due to the syntax.
Parametric Mixins
It sounds complex but the parametric mixin can allow you to change the attributes from the elements. The above example has rounded_top with radius 6px what if we need that submit with radius smaller or bigger the only thing wee need to do is to specify again inside submit the radius like this:
.submit {
.rounded_top(3px);
}
Default values
If you usually use the same border radius but in some cases you need a different one you can give the mixin a default value.
.rounded_top(@radius:6px) {
-webkit-border-top-left-radius: @radius;
-webkit-border-top-right-radius: @radius;
-moz-border-radius-topleft: @radius;
-moz-border-radius-topright: @radius;
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
.tab {
background: #333;
color:#fff;
.rounded_top;
}
.submit {
.rounded_top(3px);
}
In this example the tab element will receive the default 6px border radius but the submit element will receive the 3px one as needed.
Using All Arguments At Once
On traditional css when using lots of arguments you indicate at once. In less you could use the default values but again you can change the arguments you don’t need.
CSS:
div {
border:1px solid #bbb;
}
LESS:
.gray_border(@width: 1px, @type: solid, @color: #bbb){
border:@arguments;
}
div {
.gray_border(2px, dashed);
}
Importing just like with normal CSS you can import files. It’s the same with LESS file with the following syntax:
@import "reset.min.css";
@import "framework.less";
@import "widgets";
Sources
http://lesscss.org/
http://www.workatplay.com/blog/doing-more-less–the-dynamic-stylesheet-language
http://www.sitepoint.com/a-comprehensive-introduction-to-less/
