Less CSS Tutorials with Examples

November 09, 2014

Less CSS is a file with dot(.) less extension. Less CSS is dynamic stylesheet language. It is a CSS pre-processor. Less CSS extends the CSS language with new advanced feature. Less CSS technique allows us to make CSS more maintainable and extendable. Less CSS is open source and first version was written in Ruby. Less CSS does not work like CSS2 or CSS3 code, it is completely bind in variable and function. Less CSS is compiled by two JavaScript file, one is node.js and other is less.js . Less CSS provides the following mechanisms: variables, nesting, mixins, operators and functions.

How to Use LESS CSS

There are two ways to use LESS CSS. We can create a LESS file with extension .less and convert it on-demand using a Javascript file like note.js or less.js or you can pre-compile it and use the resulting CSS file. First download less.js file from Less website and need to link in your web page like any other javascript file.

 <script src="less.js" type="text/javascript"></script>

Next step to create file with .less extension and link to your web page.

<link rel="stylesheet/less" type="text/css" href="style.less">

After setting less.js and style.less file in web page you can write less css code in style.less file.

How to Write Less CSS

We will discuss how to write less css. To write less css we need to understand below points.
1. Declare Less CSS Variables to Store Values
2. Nesting in Less CSS
3. Mixins in Less CSS
4. Functions and operations in Less CSS

Declare Less CSS Variables to Store Values

Less CSS allows variables to store css value and then use the variable instead of the value. Less variable define css properties. We can use variable in another css class.

@header-font: Arial;
h1 {
    font-family: @header-font; 
}
.concrete {
    font-family:@header-font;
}

In the example above we have defined the @header-font variable and assigned a value "Arial" to it. @header-font variable store permanently Arial font family and if any class needed font family Arial, we can use it as below.

font-family:@header-font;

It is because Arial font is stored in @header-font variable.
In Less CSS file we can define more than one variable to store css properties. In less css file, one variable can be used with more than one class.

@color-orange: #ff9900;
@color-graylight: #cccccc; 
@color-blackdark: #333333;  
@color-blackmedium: #454545;  
body { 
    background: @color-blackdark;
    color: @color-blackmedium;
}
.concrete {
    color:@color-orange;
}
h1, h2{
    color: @color-blackdark;
}

In the above example, 4 different color has been stored in 4 different variables. If need black dark color in more than one class for text color then no need to write css properties, we can use @color-blackdark variable in class.

Nesting in Less CSS

Less CSS supports logical nesting, but code blocks are not nested. In Less CSS, one selector can be called inside other selector. If you want to change one CSS properties inside page content or a block of content then you can use nesting selector inside selector.

#concrete
 {
   h1
    {
      font-size: 30px;
      font-weight: bold;
    }
   p
   { 
    font-size: 15px;
      a
       { 
         text-decoration: none;
         &:hover
           { 
             border-width: 1px;
           }
       }
    }
}

In above example first declare id concrete in less css file. Inside concrete selector, add two selector with css properties h1 and p, both are nesting inside concrete selector. And in p selector, again define a{} selector inside p selector with new css properties.

#concrete h1 {
  font-size: 30px;
  font-weight: bold;
}
#concrete p {
  font-size: 15px;
}
#concrete p a {
  text-decoration: none;
}
#concrete p a:hover {
  border-width: 1px;
}

Mixins in Less CSS

Less CSS provides mixins property in Less CSS file. Mixins allow embedding all the properties of a class into another class by including the class name as one of its properties. Mixins behaves like function and takes argument to process.

.concrete_border_top {
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.tabBrd { 
    background: #333;
    color:#fff;
    . concrete_border_top;
}
.submitBtn {
    . concrete_border_top;
}

In the above code, we defined the .concrete_border_top element to have rounded corners on top. When we add any other class in less css and need same properties like .concrete_border_top element then we can mixins in .tabBrd class. In output .tabBrd element, background color is black-dark and text color will be white in page and only top border is will be radius.

Functions and operations in Less CSS

Less CSS provide operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors because color comes in numeric code, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing manipulation of values.

@the-border: 1px;
@base-color: #111;
@red: #842210;
 
#concrete_header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
#concrete_footer { 
  color: @base-color + #003300;
}

In the above example we defined 3 variable and store css properties. We can change css properties in variable by addition or multiplication operation in less css. In Less CSS, define another Id #concrete_header and write css properties as per requirement. But want to change color code in css class then we can use <variable> * <number> like color:@base-color * 3 and output will give color:#333;
After compilation CSS will look like as below.

#concrete_header {
  color: #333;
  border-left: 1px;
  border-right: 3px;
}
# concrete_footer { 
  color: #114411;
}

Happy Less CSS learning.

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5