less(css preprocessor)

LESS(CSS Preprocessor)LESS(CSS Preprocessor)

By: VIPIN KUMAR

Introduction to LESSIntroduction to LESSLESS is a programmingLESS compiles to CSS3LESS is a CSS PreprocessorLESS syntax is modeled after traditional CSS

LESS is often referred to as “dynamic css”

Weakness of CSSWeakness of CSSLack of Essential features(like Variables, Mixins etc.)

Hard to maintain(Huge messy CSS Files)Greater Repetitions

Why LESS?Why LESS?Save timeReduce mistakesReduce repetition (DRY)It makes logical sense to break out CSS into multiple files

More Readability

What can LESS do?What can LESS do?Variables in your CSSMixins (think functions) that allow you to reuse rule sets

Nesting of styles to mimic your DOM structure(Hierarchical Structure like DOM)

Simple mathematical operators: +, -, *, / of numbers and colors

Mathematical operations such as floor(), ceiling() and round()

Color operations such as darken(), lighten(), fadein() and fadeout()

VariablesVariablesVariable InterpolationThe examples above focused on using variables to control values in CSS rules, but they can also be used in other places as well, such as selector names, property names, URLs and @import statements.// Variables@mySelector: banner;// Usage.@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto;}

Compiles To.banner { font-weight: bold; line-height: 40px; margin: 0 auto;}

Variables Lazy LoadingVariables are lazy loaded and do not have to be declared before being used..lazy-eval-scope { width: @var; @a: 9%;}@var: @a;@a: 100%;

default variablesWe sometimes get requests for default variables - an ability to set a variable only if it is not already set..float(@val: left){ float: @val;}

Compiled To.lazy-eval-scope { width: 9%;}

div{ .float;}

Compiles to.div { Float: left;}

Variable Scope

The scope of a variable refers to the places where it is available. If you define a variable at the very start of your LESS file it will be available to any code you write after it.

You can also define a variable inside a CSS rule. In this case the variable is not available outside of this ruleset; it can only be used locally.@color: #222222;a { @color: #ffffff; color:@color;}button { background: @color;}

MixinsMixinsReusable classes are called mixins,Mixins Can accept parameters,Can define default value for parameters,@arguments is a special variable that contains the ordered value stored in all parameters.RoundBorders { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}#menu { color: gray; .RoundBorders;}

//Output.RoundBorders { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}#menu { color: gray; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

GuardsA guard is a special expression that is associated with a mixin declaration that is evaluated during the mixin process. It must evaluate to true before the mixin can be used. Guards are useful when you want to match on expressions, as opposed to simple values or arity.We use the when keyword to begin describing a list of guard expressions.Guards can be separated with a comma—if any of the guards evaluates to true, it’s considered a match: .mixin (@a) when (@a > 10), (@a < -10) { ... }Instead of a comma, we can use the and keyword so that all of the guards must match in order to trigger the mixin: .mixin (@a) when (isnumber(@a)) and (@a>0) { ... }Finally, you can use the not keyword to negate conditions:.mixin (@b) when not (@b > 0) { … }

.mixin (@a) when (lightness(@a) >= 50%) { background-color: black;}.mixin (@a) when (lightness(@a) < 50%) { background-color: white;}.mixin (@a) { // this is always included color: @a;}

Note:The full list of comparison operators usable in guards are: >, >=, =, =<, <.

Calling:.class1 { .mixin(#ddd) } // this matches the first mixin.class2 { .mixin(#555) } // this matches the second mixin

Output:.class1 { background-color: black; color: #ddd;}

.class2 { background-color: white; color: #555;}

If you want to match mixins based on value type, you can use the is* functions. These are—iscolor, isnumber, isstring, iskeyword, and isurl. If you want to check if a value, in addition to being a number, is in a specific unit, you may use one of these—ispixel, ispercentage, isem. .mixin (@a) when (iscolor(@a)) { color: @a;}.mixin (@a) when (ispixel(@a)) { width: @a;}body { .mixin(black);}div { .mixin(960px);}

//Outputbody { color: #000000;}

div { width: 960px;}

LOOPsLOOPsIn Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create various iterative/loop structures.

.loop(@counter) when (@counter > 0) { // next iteration .loop((@counter - 1)); // code for each iteration width: (10px * @counter); }div { .loop(5); // launch the loop }

Output:div { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px;}

A generic example of using a recursive loop to generate CSS grid A generic example of using a recursive loop to generate CSS grid classes:classes:.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1));}

.column-1 { width: 25%; }




Nesting of styles to mimic your DOM Nesting of styles to mimic your DOM structurestructureLESS was designed to be as close to CSS as possible, so the syntax is identical to your current CSS code. Cleaner Structure With Nesting. you don’t have to repeat selectors over and over again;

Output:

#header {}#header #nav {}#header #nav ul {}#header #nav ul li {}#header #nav ul li a {}

LESS Structure# header { #nav { ul { li { a {} } } }}

NamespacesNamespacesNamespaces in programming languages are typically used to group packages of functionality together. When starting work on a new website based on your framework you can add this #my_framework bundle and use it without messing up any other styles you might already have or want to add in the future.This is also a great way to enable quick theme changing and modification. If you develop a number of themes for your company to use as templates on demand you can include all of them as bundles in the same LESS file and use use the one you need.

Examples is in next Slide

#my_framework { p { margin: 12px 0; } a { color:blue; text-decoration: none; } .submit { background: red; color: white; padding:5px 12px; }}.submit_button { #my_framework > .submit;}

Output:#my_framework p { margin: 12px 0;}#my_framework a { color: blue; text-decoration: none;}#my_framework .submit { background: red; color: white; padding: 5px 12px;}.submit_button { background: red; color: white; padding: 5px 12px;}

ReferencesReferenceshttp://lesscss.org/features/#mixins-feature

http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/

http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216

less(css preprocessor)

Education