less-intro

View Github Repository Open presentation in a new window

dmahipus

See all presentation from dmahipus

less-intro

0 0

less-intro

Introduction to LESS

On Github dmahipus / less-intro

Lean CSS with

dmahipus.github.io/less-intro

Overview

  • What is {less}?

  • Why use {less}?

  • Features

    • Variables
    • Nested Rules
    • Mixins
    • Functions
    • + More

  • Compilation Tools

  • Short Demo

What is {less}?

A CSS pre-processor that extends the CSS language, adding features that allow variables, mixins, operations, functions and many other techniques to make CSS that is more maintainable, themable and extendable.

lesscss.org/getting-started

Why use {less}?

  • Write less code.

  • DRY

  • Code Reuse

  • Modular

  • Maintainable

Variables

/* Syntax */
@{variable name}: value;

/* Example Declarations */
@brand_color: orange;
@text_color: #fff
@link-color: #428bca;

/* Usage */
section{
    background-color: @brand-color;
}
.link:hover{
    color: @link-color;
}

Nested Rules

// LESS Nesting
.grand-parent{
    background-color: pink
    .parent{
        color: black
        .child{
            font-size: 24px;
        }
    }
}



// Pure CSS
.grand-parent{
    background-color: pink;
}
.grand-parent .parent{
    color: black;
}
.grand-parent .parent .child{
    font-size: 24px;
}

It is a good practice to limit nesting to maximum of 3 levels

Mixins

//Mixin Example
.bordered{
    border-top: dashed 1px red;
    background-color: yellow;
}
.box1{
    color: green;
    .bordered;
}
.box2{
    color: blue;
    .bordered;
}


//Compiled CSS
.bordered{
    border-top: dashed 1px red;
    background-color: yellow;
}
.box1{
    color: green;
    border-top: dashed 1px red;
    background-color: yellow;
}
.box2{
    color: blue;
    border-top: dashed 1px red;
    background-color: yellow;
}

Cont...

//Mixin Example2
#id-mixin{
    padding: 10px 20px;
    line-height: 14px;
}
.hover-mixin(){
    border-bottom: dotted 2px orange;
}
.nav-link{
    font-size: 16px;
    .hover-mixin;
    #id-mixin;
}
.sidebar-link{
    font-size: 24px;
    background-color: black;
    .hover-mixin;
}



//Compiled CSS
#id-mixin{
    padding: 10px 20px;
    line-height: 14px;
}
// No mixin output for .hover-mixin
.nav-link{
    font-size: 16px;
    border-bottom: dotted 2px orange;
    padding: 10px 20px;
    line-height: 14px;
}
.sidebar-link{
    font-size: 24px;
    background-color: black;
    border-bottom: dotted 2px orange;
}
Any CSS Class, ID, and Element definition can be mixed in

Parametric Mixins

//Parametric Mixin Example
.circle(@size, @color){
    width: @size;
    height: @size;
    background-color: @color;
    -webkit-border-radius: (@size/2);
       -moz-border-radius: (@size/2);
            border-radius: (@size/2);
}
.circle-small{
    .circle(24px, tomato);
}
.circle-large{
    .circle(300px, orange);
}


//Compiled CSS
.circle-small{
    width: 24px;
    height: 24px;
    background-color: tomato;
    -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
            border-radius: 12px;
}
.circle-large{
    width: 300px;
    height: 300px;
    background-color: orange;
    -webkit-border-radius: 150px;
       -moz-border-radius: 150px;
            border-radius: 150px;
}