Styled Page With LESS

LESS

Posted by zully in: CSS

LESS – The dynamic stylesheet language that extends CSS with dynamic behavior. It allows flexibility when creating the stylesheets.

LESS runs on both the client-side (IE6+, Firefox etc..) and server-side. LESS was developed by Alexis Sellier known as cloudhead.

In this quick basic guide I will be discussing only how to use LESS on client-side. With example of of variables, operators, mix-ins and nested selectors.

First you need to download the latest version of less.js from github.com. Version 1.1.3 is latest at the time of writing.

You need to create stylesheet in a file with .less extension (i.e style.less) and save the following content.

 

// LESS stylesheet
// VARIABLES
@font-color: #FF0000;
@header-font-size: 26px;
@base-font-size: 12px;
#content {
h1 {
font-size: @header-font-size;
font-weight: bold;
}
p {
font-size: @base-font-size;
color: @font-color;
}
// NESTED
div {
a {
text-decoration: none;
&:hover {
font-weight: bold;
color: @font-color;
}
}
}
// OPERATORS
#footer {
color: @font-color + #0033FF;
}
// FUNCTIONS
.font-sizer (@size: 12px) {
font-size: @size;
}
#functionEx {
.font-sizer;
}
#functionEx2 {
.font-sizer(30px);
}
}

 

Html File

You need to copy the following content and save it in a html file.

Styled page with LESS
<script src="less-1.1.3.min.js" type="text/javascript"></script>
<div id="content">
<h1>Page Header</h1>
Welcome to my LESS styled page!
<div>More content and <a href=".">links</a></div>
<div id="footer">Footer content goes here</div>
<div id="functionEx">Usage of function with default font size</div>
<div id="functionEx2">Usage of function with parameter</div>
</div>

Click here to see See LESS in Action

Resourcess

0

Leave a Reply