Basics of LESS CSS

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

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.

tut.less 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;
}

tut.css – css output file.

#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;
}

Operations With Variables

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

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.

tut.less

// mixin example

.myStyle {
    color: #333;
    border: 1px solid gray;
}

#myDiv {
    .myStyle
}

tut.css

.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

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.

tut.less

// nested style example
#myDiv {
    background-color: black;
    a {
        color: red;
    }
    
    p {
        color: white;
    }
}

tut.css

#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.

Pseudo-Selectors

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