LESS is a easy to use markup language to extend CSS with variables, mixins, operations, and nested rules. Best of all it's easy to convert to LESS, you simply rename your CSS extensions to .less and you are ready to go.
Of course your existing CSS won't utilise the power of LESS, but it's an easy way to migrate. You could spend a day converting your CSS code to the structure/formatting LESS enables or simply modify as you code.
Variables
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
@brand_color: #4D926F;
#header {
color: @brand_color;
}
h2 {
color: @brand_color;
}
Mixins
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It's just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Operations
Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to do create complex relationships between properties.
@the-border: 1px;
@base-color: #111;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: (@base-color + #111) * 1.5;
}
Contact
Blog
Projects
Services
About
