<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>LESS variables overview</title> </head> <body> <h1>Welcome to Yiibai Yiibai</h1> <div class="div1"> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> <div class="div2"> <p>LESS is a dynamic style sheet language that extends the capability of CSS. LESS is also cross browser friendly.</p> </div> </body> </html>
@color1: #ca428b;
.div1{
background-color : @color1;
}
.div2{
background-color : @color1;
}
lessc style.less style.css
h1 {
color: #D0DC11;
}
.div1 {
background-color: #ca428b;
color: #D0DC11;
}
.div2 {
background-color: #ca428b;
color: #D0DC11;
}