Variables in CSS Pre Processor LESS
Posted By : Damandeep Singh | 26-Sep-2018
LESS is a dynamic stylesheet language and extend the capability of CSS. LESS is a CSS pre-processor that helps us to customize, manage and reuse the style sheet for a website. LESS CSS is also a cross-browser friendly.
Variable
Variables can be declared at a single location and access throughout the program or page. with the use of variables code can be optimized.
suppose in CSS we have to declare color repeatedly for each CSS class. rather writing the same CSS again and again simply use variables whether it is class name or property or else.
for eg,
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
color: @link-color;
}
a:hover {
color: @link-color-hover;
}
.widget {
color: #fff;
background: @link-color;
}
Variable Interpolation
Variables can also be used in selector names, property names, URLs and import statement
@my-selector: banner;
// Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
//Compiles to:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
while Providing URL for images simply set the path in variables and change the file name as per your requirement
@images: "home/images/img";
// Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}
Lazy Evaluation
Variables should not be declared before being used.
Valid Less snippet:
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
//this is valid Less too:
.lazy-eval {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
//both compile into:
.lazy-eval {
width: 9%;
}
When characterizing a variable twice, the last meaning of the variable is utilized, seeking from the present extension upwards. This is much the same as a CSS where the last property inside a definition is utilized to decide the esteem.
For instance:
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
//Compiles to:
.class {
one: 1;
}
.class .brass {
three: 3;
}
each scope has it's "final" value, which is similar to properties in the browser, like this example using custom properties:
.header {
--color: white;
color: var(--color); // the color is black
--color: black;
}
This means that, like other CSS pre-processing languages,
Properties as Variables (NEW!)
You can easily treat properties like variables using the $prop syntax. Sometimes this can make your code optimized
.widget {
color: #efefef;
background-color: $color;
}
//Compiles to:
.widget {
color: #efefef;
background-color: #efefef;
}
Note: Less will choose the last property within the current/parent scope as being the "final" value.
.block {
color: red;
.inner {
background-color: $color;
}
color: blue;
}
//Compiles to:
.block {
color: red;
color: blue;
}
.block .inner {
background-color: blue;
}
Default Variables
Default variables - an ability to set a variable only if it does not exist. This can be easily overridden variable by putting the definition afterwards.
For instance:
// library
@base-color: green;
@dark-color: darken(@base-color, 10%);
// use of library
@import "library.less";
@base-color: red;
This works fine because of Lazy Loading - @base-color is overridden and @dark-color is a dark red.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Damandeep Singh
Damandeep Singh is a Front-end Developer having Good knowledge of HTML, CSS3/CSS, Bootstrap, Angular, Ionic. He likes to listen to Music in Free time.