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>
<link rel="stylesheet/less" type="text/css" href="style.less">
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; }
font-family:@header-font;
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; }
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; } } } }
#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; }
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; }
After compilation CSS will look like as below.
#concrete_header { color: #333; border-left: 1px; border-right: 3px; } # concrete_footer { color: #114411; }