Why LESS?

LESS=The dynamic stylesheet language.

LESS extends the standard CSS syntax.

This means that you can create a LESS stylesheet using regular CSS, and just add LESS code to the stylesheet as and when you need it. 

LESS has everything that CSS is missing.

 CSS-> LESS

no more verbosity.

How to use?

The LESS compiler is written in JavaScript, so you can just include it in your page along with your LESS stylesheet.

The compiler converts your LESS code into CSS when the browser loads the page.

It’s advisable though to compile your LESS code to CSS and ship the CSS output on the production site.

Overview

Variables

 When you program you can set a constant variable that you can access throughout your program. You can do the same with LESS. Set a variable named @red, add your favorite hex red color and use it in your stylesheet.

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.

Do you want DIVs to have radius and some shadow. Do you want to have a consistent style? Define your mixin and use it everywhere. More radius for everyone? Change the mixin radius value!

Nested rules

You can simply nest selectors inside other selectors. These can save you a lot of coding, and they make your code clearer. Bye bye long selectors!

Operators and functions,

which let you create CSS properties mathematically.

Namespaces for grouping variables and mixins

This is very useful if you want to avoid naming clashes.

go to lesshat

Lesshat

86 smart mixins

Less.js & Bootstrap

// Success appears as green
.btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}

ng-devoops & Less.js

body.less

Custom Variables

@gray-base: #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@wh-base: #fff;
@wh-lighter:            darken(@wh-base, 13.5%); // #222
@wh-light:              darken(@wh-base, 20%);   // #333
@wh:                   darken(@wh-base, 33.5%); // #555
@wh-dark:             darken(@wh-base, 46.7%); // #777
@wh-darker:           darken(@wh-base, 93.5%); // #eee

@base: #496A84;
@brand-primary:         darken(#428bca, 6.5%); // #337ab7
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;

@dashgray: #9C9A78;
@dashpink:#AA8383;//rgba(170, 131, 131, 1)
@dashblue:#45837A;
@content:#FBFBF0;
@warning: @dashgray;
@dropdown-base: @gray-dark;

Frequently used functions

.size()
.inner-shadow()

.border-radius()

.transition() 
.linear-gradient()
.darken()
.lighten()
.fade()

//Less code 
@dropdownbase: saturate(darken(red,20%),-20%);
@test:fade(@dropdownbase,70%);

//CSS code 
 color: rgba(138, 15, 15, 0.7);

.border-radius(4px);
.background-image(linear-gradient(to bottom, fade(@wh-base,5%) 0%,darken(@wh-base,5%) 100%));

Error?

Dynamic styling with Angular.js

Subtitle

 .service('styleService', [function() {
        var styleService = {}
        styleService.changeGrayBase = function(graycolor) {
            less.modifyVars({'@gray-base': graycolor});
        };
        styleService.changeBase = function(mygray,dashgray,dashpink,warning,dashblue){
            less.modifyVars({
                '@gray-base': mygray,
                '@dashgray': dashgray,
                '@dashpink': dashpink,
                '@warning':warning,
                '@dashblue':dashblue

            });
        };
        styleService.firestyle = function(){
            styleService.changeBase('saturate(darken(red,49%),-20%)','#9C9A78','saturate(darken(#FFCC99,20%),-50%)','saturate(darken(#FFCC99,20%),-50%)','#45837A');
        };
        styleService.waterstyle = function() {
            styleService.changeBase('darken(#152642,15%)', 'white', 'saturate(lighten(red,20%),-20%)', '#5cb85c','#45837A');
        }
        styleService.airstyle = function() {
            styleService.changeBase('darken(LightSeaGreen ,40%)', 'white', 'saturate(LightSalmon,-20%) ', 'tomato','tomato');
        }
        styleService.ironstyle = function() {
            styleService.changeBase('#000', '#9C9A78', '#AA8383', '#9C9A78','#45837A');
        }
        return styleService;
    }

OUTLOOK

Body.less should be separated into smaller files

TODOs should be fixed

Keep using same variables & functions for future styling

Check Lesshat functions before you write one