Basics of LESS CSS
Reading Time:
Reading Time:
To use LESS we need a LESS compiler. The one that i use is Perpros. It is an GUI application. Using prepros is straight forward. Just open the LESS file in prepros and it will compile the less file, save the output CSS file in the specified location. After the first save, every time you hit the save button it will compile and output the CSS.
Now open a new file in a text editor, name it with whatever you want it to be. I am going to create a file named tut.less
If you want to see a live demo of the following examples, visit lesstester.com. Copy and paste the following less code to compile and tweak it and view the output.
Variables are very useful when we need the same value in more than one place. when we need to modify it later, it would be very easy to do it with variables as we don’t have to modify the value every where it is used.
In less you can create a variable using @variableName: value
syntax. The variables can be used in places such as, a border property value, a string for the content property, selector name, URLs, a value in px for the font size etc. Below is the example for the variables in LESS. The generated CSS for the corresponding LESS code is stored in the tut.css file.
@textColor: white;
@bgColor: #333;
@border: 2px solid red;
@content: "This is the sample content from less";
// variable example
#content p {
color: @textColor;
background-color: @bgColor;
border: @border;
}
#content p:after {
content: @content;
}
#content p {
color: #ffffff;
background-color: #333333;
border: 2px solid #ff0000;
}
#content p:after {
content: "This is the sample content from less";
}
In the above shown example, the variables are declared in the LESS file. Those variables are used in the #content p
and #content p:after
styles. As you can see, the values of the variables are substituted in the style declared. The output file tut.css contains the compiled CSS output
To use the less variables in locations other than the property value, you must use it inside curly braces
@var-name: container;
.@{var-name} {
with: 300px;
height: 200px;
}
compiles to
.container {
with: 300px;
height: 200px;
}
In LESS you can do operations on variables. For example, in JavaScript you can add two variables like this
var a = 5, b = 10, sum;
sum = a + b; // would yield the sum of a and b
Likewise in Less you can operate on variables in Less. Less also identifies the units(like %, px, #hexcode) of the values in the variables and does the operations based on that.
@height: 50%;
@width: @height + 50;
@total_margin: 20px;
@lightgrey: #333333;
#container {
width: @width;
height: @height;
margin-left: @total_margin / 2;
margin-right: @total_margin / 2;
color: @lightgrey + 5%;
}
compiles to
#container {
width: 100%;
height: 50%;
margin-left: 10px;
margin-right: 10px;
color: #383838;
}
Mixins are a way of reusing the code. They are called as mixing in, as it will enable us to mix one style class or id into another.
To create a mixin, include the class or id name in another style where you want all the styles of it to be included.
// mixin example
.myStyle {
color: #333;
border: 1px solid gray;
}
#myDiv {
.myStyle
}
.myStyle {
color: #333;
border: 1px solid gray;
}
#myDiv {
color: #333;
border: 1px solid gray;
}
In the above example the styles properties of .myStyle
will be included in the #myDiv
Nesting is useful if you need to include styles for the child elements of a particular element, like cascading. Nested styles can be done by writing a parent style and then writing the child element styles inside the parent elements style.
// nested style example
#myDiv {
background-color: black;
a {
color: red;
}
p {
color: white;
}
}
#myDiv {
background-color: black;
}
#myDiv a {
color: red;
}
#myDiv p {
color: white;
}
In the above example shown, all the a
tags appearing inside #myDiv
will be red in color and the p
tag text will appear in white color.
You can also use pseudo-selectors inside our mixin with this method. Use &
to use pseudo selector. &
represents the class or id in which it is present in.
// less code
.alert a {
color: lightgrey;
&:hover { /** '&' equals '.alert a' */
color: blue;
}
}
compiles to
// css output
.alert a {
color: lightgrey;
}
.alert a:hover {
color: blue;
}
The above code is written to highlight the a
tags color and the hover color inside the .alert
class element. The represents the selector in which it is contained in. In our case
&
equals to .alert a