Here I come with the new article in this series of LESS CSS. If you are not sure about previous article then I would recommend you to read this article about LESS CSS Introduction.
In this previous article we have looked into basics of LESS CSS and how to get started section. In this article we will start with the very basic thing of the LESS CSS which is Variables.
As I have mentioned earlier LESS CSS will make your CSS dynamic. Here dynamic term is used to refer it as a programmable. Just like any programming language LESS CSS have variables with declare once and use anywhere concept.
With LESS CSS you will have to do all your code in .less file instead of .css file. So Let’s see how you can declare and use Variables in LESS CSS.
Declare Variables in LESS CSS
[cc lang=”css”]
// LESS CSS CODE – DECLARE VARIBALES
@bgcolor: #00ccff;
@linkcolor: #FC0000;
@linkhovercolor: #666666;
[/cc]
In above code we have seen that how we can declare variables in LESS CSS. Now let’s see how we can use these variables in LESS CSS code.
Use Variables in LESS CSS
[cc lang=”css”]
// USE Variables – LESS CSS CODE
body
{
background-color: @bgcolor;
}
a
{
color: @linkcolor;
}
a:hover
{
color: @linkhovercolor;
}
[/cc]
As mentioned above we can create variables and use them. But LESS will create a compiled CSS(traditional) using the less code. Let’s see the compiled code now.
[cc lang=”css”]
/* Compiled CSS Code */
body
{
background-color: #00ccff;
}
a
{
color: #FC0000;
}
a:hover
{
color: #666666;
}
[/cc]
Here I have given example of the color and background color, but in fact you can use these variables for any purpose you need just like font-size?
String Variables in LESS CSS
Upto now we have seen that we can use variables for the CSS property but we can store string also in these variables and use those variables for content property. Let’s see this in action.
[cc lang=”css”]
// LESS String Variables
@authorname:’Avinash’;
@authordesc: “Expert Developer”;
a.authorlink:before
{
content: @authorname;
}
a.authorlink:after
{
content: @authordesc;
}
[/cc]
Conclusion
So we are done with the Variables in LESS CSS. We have found that we can use use variables for any property of CSS. Even we can declare variables with string value and use as content property.
If you don’t want to miss any upcoming article in this series then subscribe to our RSS Feed via mail, Like us on Facebook or Follow us no Twitter. If you do so, I am sure you will never miss any article/freebies or updates from us.
