Less - an Introduction

.less – Best CSS way

An Introduction to less CSS framework

By

Jaydev Gajera

WHAT is CSS?

 Are you joking?
We all know that Cascading Style Sheets (CSS) is a style sheet
language used to describe the presentation semantics (that is,
the look and formatting) of a document written in a markup
language. i.e. HTML

Good CSS looks like this:

Redundant code

Multiple Classes

CSS looks good: Markup not so much:

What is less ?

 less is a dynamic stylesheet language.
 Less is available at lesscss.org
 It can be applied by
Variables
Mixins
Nested Rules
Functions & Operations

Variables
Variables allow you to specify widely used values in a single place, and then
re-use them throughout the style sheet, making global changes as easy as
changing one line of code.

Mixins
Mixins allow you to embed all the properties of a class into another class by
simply including the class name as one of its properties. It’s just like variables, but
for whole classes. Mixins can also behave like functions, and take arguments, as
seen in the example below.

Nested Rules
Rather than constructing long selector names to specify inheritance, in Less you can
simply nest selectors inside other selectors. This makes inheritance clear and style
sheets shorter.

Functions & Operations
Operations let you add, subtract, divide and multiply property values and colors,
giving you the power to create complex relationships between properties.
Operations should only be performed within parentheses in order to ensure
compatibility with CSS.

Client-side usage
 Link your .less stylesheets with the rel set to “stylesheet/less”

<link rel="stylesheet/less" type="text/css" href="styles.less">

 Then download less.js from the top of the page, and include it in the
<head> element of your page, like so:

<script src="less.js" type="text/javascript"></script>

 Make sure you include your stylesheets before the script.

Question : How to use with with windows?
Answer : Use Winless. Available at winless.org

Winless
 WinLess is a Windows GUI LESS compiler. WinLess is a must-have for the
webdeveloper who uses Windows

Usage
 When you add a folder to WinLess (either via 'Add folder' or by dropping it
on the folder pane), WinLess will start watching the LESS files in it.
 WinLess will automatically recompile a less file when it is changed.
 If you have a folder called 'less' and a folder called 'css' on the same level,
add the parent folder. WinLess will then automatically use the css folder as
output folder.

Less - an Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (7)

Similar to Less - an Introduction

Similar to Less - an Introduction (20)

Less - an Introduction