Simplify your CSS with LESS

If you do a bit of modern web you've probably used or seen style sheets CSS format. The acronym CSS means : Cascading Style Sheet. These are the files that define the layout, colors and forms of a website. We must first select an item on the page, and then apply the desired style, example below.

body { /* body of the page */
    background-color: #A00; /* background color of the page */
}
body header {
    background-color: # A00; /* background color of the header */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; /* border radius, soften angles */
}
body h2 {
    background-color: # F00; /* Background of the second level of title */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px; /* border radius, soften angles */
}

It is clear now that some parameters such as color and rounded corners are repeated and it would be possible to combine them into a single common element rather than writing them twice. This is impossible in CSS, which will result in a large file can simple to maintain and evolve.

Today there are several programming languages that are extending the CSS in order to make the style of your simple page to update and evolve. One of these languages is called LESS and may be converted into CSS server as a client side.

I think the syntax is much more simple and natural and allows you to perform arithmetic operations, create variables, prepare CSS templates or create custom functions. Previous style sheet could be written as follows:

@red = #A00 ; // definition of a variable for color

.border-radius (@radius) { // defining a template for rounded corners
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius; 
}

body {
    background-color : @red ;
    header {
        background-color : @red ;
        .border-radius (5px) ;
    }
    h2 {
        background-color : saturate(@red, 100%) ; //Use of a function according to saturate the color
        .border-radius (5px) ;
    }
}

It is then possible to transform the CSS code using the compiler Lessc on your Linux machine this way:

sudo apt-get install node-less yui-compressor
lessc test.less > test.css
yui-compressor -o small_test.css test.css

Or by defining it directly into an HTML page with JavaScript compilation, the script can be found at: https://github.com/less/less.js. So just then integrate your LESS stylesheet into your site and load the less.js script as follows:

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

You can find all the documentation on the language at this address: http://lesscss.org. It is also possible to retrieve the source code of LESS and participate in its development via GitHub: https://github.com/less/less.js.

And you what do you use to enhance and simplify your CSS?

Image : exeypanteleev

Simplify your CSS with LESS #

Simplify your CSS with LESS