LESS

Functions Overview

    Mixins - classes for classes
    Parametric mixins - classes to which you can pass parameters, like  functions
    Nested Rules - classes with classes, which cut down on repetitive code
     Operations - math within CSS
     Color functions - edit your colors
     Namespaces - group of styles that can be called by references
     Scopes - make local changes to styles
     JavaScript evaluations - JS expressions evaluated in CSS

You can play online [HERE] 


Variables



Extend


Extend is a LESS pseudo-class which merges the selector it is put on with ones that match what it references.

      LESS                                           Output CSS

Mixins


     LESS                                                       Output CSS

Nested Rules


                                    Plain CSS                                             LESS

Not Outputting the Mixin


                                    LESS                                                   Output CSS

Selectors in Mixins


                                  LESS                                              Output CSS


Namespaces



Guarded Namespaces



Parametric Mixins

 
              Mixin                                                    Usage


Mixins with Multiple Parameters


Mixins with Multiple Parameters



Compiles To


Named parameters


A mixin reference can supply parameters values by their names instead of just positions.


@rest Variable


You can use ...  if you want your mixin to take a variable number of arguments. Using this after a variable name will assign those arguments to the variable.


Pattern-matching


                          Define Mixin                                                 Usage


Mixins as Functions



Passing Rulesets to Mixins


A detached ruleset is a group of properties, nested rulesets, media declarations or anything else stored in a variable.


Detached Ruleset


A detached ruleset call unlocks(returns) all its mixins into caller the same way as mixins calls do. However, it does NOT return variables.


Scoping

Definition and Caller Scope Visibility

A detached ruleset sees the caller's variables and mixins:

Scoping

Definition and Caller Scope Visibility

Variables and mixins accessible from definition win over those available in the caller:

Referencing Won't Modify Detached Ruleset Scope



Unlocking Will Modify Detached Ruleset Scope


Parent Selectors

The & operator represents the parent selector of a nested rule.

          LESS                                           Output CSS

Notice that without the &, the above example would result in       a :hover rule

Loops

A generic example of using a recursive loop to generate CSS grid classes

              LESS                                               Output CSS

Made with Slides.com