Less: Learner Style Sheets
Less is an easy to learn language extension for CSS that makes additions to the existing CSS syntax in order to provide users with advanced capabilities and more concise coding.
Using Less...
With node.js (recommended):
Install with npm
Use command line to compile your .less files to .css
With the browser (easier to use, but slower loading):
-
Link to your .less styles with
<link rel="stylesheet/less" type="text/css" href="styles.less" />
-
Paste
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
into the head of your .html file
OR
-
download less.js and use
<script src="less.js" type="text/javascript"></script>
in the head of your .html file
...Gives You More!
With Less, you can assign variables like so:
@width:
20px
;
@height: @width
+
20px
;
#header
{
width:
@width
;
height:
@height
;
}
lesscss.org
This gives the same output as:
#header
{
width:
20px
;
height:
40px
;
}
lesscss.org
It also gives you the ability to use nesting in combination with, or instead of, cascading, a set of mathematical operations, functions, and much more to make your coding faster, more powerful, and more concise.