LESS CSS – A working tutorial

GK | June 20, 2014 | CSS, Technology | 1 Comment

This is a less css working tutorial with html and less css. I will explain here how to write less css with dynamic approach and how to convert less css to style.css .

Lets write first our html –

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="icon" id="shape1"></div>
    <div class="icon" id="shape2"></div>
    <div class="icon" id="shape3"></div>
</body>
</html>

In the html, you can see there are 3 divs with class name icon and id shape1, shape2 , shape3 respectively.
Now, we will write some css for these divs but in less css style.

Lets start writing less css style. –
First create a style.less file for writing your less css. Please keep in mind, you will write all less css code in .less extension file only then you will convert style.less file to style.css to see the result. i am thinking to make 3 circles on these 3 div so lets make them colorful.So,Lets define color variables. We can use these variables any where any time in our less css.

@lightRed:   #fdd;
@lightGreen: #dfd;
@lightBlue:  #ddf;

@defaultThemeColor:@lightRed;

Lets write css for icon class. As, we have same name class so it will apply on all divs.

.icon{
    display:inline-block;
    width:200px;
    height:200px;
    background:@defaultThemeColor;
    margin:20px;
}

As you can see, we have used variable for background color. i hope your remember variables in my first less css post.

Now,Lets create a function named Round . We can use this any where in less css.

.Round
{
    -webkit-border-raduius:9999px;
    -moz-border-radius:9999px;
     border-radius:9999px;
}

#shape1
{
    .Round;
}

As you can see, we created a round function and used it in shape1 id.
Lets create a variable for default radius . You can see in below code, we are writing a function RoundedShape and calling it in another and using variables.

@defaultRadius : 30px;
.RoundedShape(@radius:@defaultRadius)
{
    -webkit-border-raduius:@radius;
    -moz-border-radius:@radius;
     border-radius:@radius;
}

.Round{
    .RoundedShape(9999px);
}
 
.RoundedSquare(@radius:@defaultRadius){
    .RoundedShape(@radius);
}

#shape1{
    .Round;
    border:@borderSize solid @borderColor;
}
 
#shape2{
    .RoundedSquare;
    border:@borderSize solid @borderColor;
}

#shape3{
    .RoundedSquare(60px;);
    border:@borderSize solid @borderColor;
}


@defaultShapesWidth:200px;
@borderSize:@defaultShapesWidth * 0.1;

@defaultThemeColor:@lightBlue;

@borderColor:desaturate(@defaultThemeColor, 100%);

Now, if you look up this css, its pure dynamic and written by using variables. Now to convert it, we can use lessc command to convert style.less to style.css.

I hope you must install node js as i previous explained.

If not then please read –

How to install node js pacakage on windows ?
and How to compile style.less to style.css ?

Learn LESS CSS basics –

LESS CSS – A working tutorial
Use command in cmd – lessc style.less > style.css

It will convert style.less to style.css.

Hope you try once this example to get an overview of less css code .