In this second part of our LESS CSS series, we will look into Variables in LESS. If you don’t have basic idea or don’t know how to setup LESS,You can get idea about LESS from the first part here.
In first article,we have checked basics of LESS and how to use LESS.In this article, I am going to explain the LESS CSS Syntax and Variables.
LESS make css code organized because it work like a programming language rather than regular css. Same like any programming language LESS CSS support variables which you can declare once and use anywhere in the file.
Remember, You have to write your code into .less file so let’s understand how to use variables into LESS.
Variable Declaration SYNTAX
Variables in LESS begin with the @ sign follow by variable name
1 2 3 | @variable_name : variable_value |
Let’s understand by code. Here, I am going to take two variable. You can paste it into your .less file
1 2 3 4 | @base-color: #006699; @font-color: #669900; |
Next, we will use declared variables into the class or id or tag.
1 2 3 4 5 6 7 8 9 10 11 | body { background-color: @base-color; } h2 { color: @font-color; } p { color: @font-color; } |
In Above, We have used variable and single statement of color so when you want to change its value, there is no need to find out and replace from everywhere from 1000 of lines you have written.
LESS compile the code with CSS when you render into browser so let’s see how compiled code looks:
1 2 3 4 5 6 7 8 9 10 11 | body { background-color: #006699; } h2 { color: #669900; } p { color: #669900; } |
Here I have used font color and background color, but in fact you can use for any element. Even you can use @import statements to reuse stylesheets so if you remove that stylesheet you can easily remove it.
String Variables in LESS
Next is about to store string value into the variables and use those variables for content property. Let’s understand by example:
1 2 3 4 5 6 7 8 9 10 11 | // LESS String Variables @sitename: 'CreativeDev'; @siteage: "3 Years"; a:before { content: @sitename; } a:after { content: @siteage; } |
Wrap Up:
That’s it. Download LESS js file and start implementation in your application.I am sure, you will love it to use and increase your productivity 🙂
In the next article of LESS Series, we’ll look in to Mixins, one of the good feature in LESS.
Hope this article series helpful to you.As always, thanks for reading an article. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (3)