{
LESS
}
The dynamic stylesheet language
Apache License
Nested Rules
<div class="header"> <h1>Hello <span>World</span></h1> <h2>Welcome to Less!</h2> </div> <style> /* CSS */ .header h1 { color: red; } .header h1 span { color: darkblue; } .header h2 { color: darkorange; } </style> <style type="text/less"> /* LESS */ .header { h1 { color: red; span { color: darkblue; } } h2 { color: darkorange; } } </style> <script src="../js/lib/less.js"></script>
Variables
<h1>Hello World</h1> <h2>Welcome to Less!</h2> <style> /* CSS */ h1 { color: red; } h2 { color: red; } </style> <style type="text/less"> /* LESS */ @color: red; h1 { color: @color; } h2 { color: @color; } </style> <script src="../js/lib/less.js"></script>
Mixins
<div id="header">Hello World</div> <div id="footer">Welcome to Less!</div> <style> /* CSS */ #header { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; border: solid 1px red; padding: 10px; margin: 2em; } #footer { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border: solid 1px red; padding: 20px; margin: 2em; } </style> <style type="text/less"> /* LESS */ .rounded-corners (@radius: 5px, @padding: 10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; border: solid 1px red; padding: @padding; } .foo { margin: 2em } #header { .rounded-corners; .foo; } #footer { .rounded-corners(10px, 20px); .foo; } </style> <script src="../js/lib/less.js"></script>
Operations
<ul> <li>Less</li> <li>is</li> <li>FUN!</li> <li class="target">></li> </ul> <style type="text/less"> @increment: 20; .target { position: absolute; left: 0; top: 0; transition: all .3s linear; } li:nth-of-type(2):hover ~ .target { top: @increment*1px } li:nth-of-type(3):hover ~ .target { top: @increment*2px } li:hover { color: red } </style> <script src="../js/lib/less.js"></script>
Functions
<div id="header">Hello World</div> <style type="text/less"> @color : red; #header { background : fade(@color, floor(100/2)); } </style> <script src="../js/lib/less.js"></script>
http://lesscss.org/
Rouben Meschian
rmeschian@gmail.com