less css preprocessor

3
LESS Preprocessor Información tomada de: http://lesscss.org/ Latest version at the moment of writing: 1.7.4 Less is a CSS preprocessor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS. CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years. Features of LESS Variables Mixins Nested rules Media query bubbling and nested media queries Operations Functions Namespaces & Accessors Scope Comments Importing Variables Documento creado por Francisco Quintero

Upload: francisco-quintero

Post on 08-Apr-2016

18 views

Category:

Documents


0 download

DESCRIPTION

LESS es un preprocesador de CSS que permitirá utilizar características básicas de los lenguajes de programación en tu desarrollo de hojas de estilos para proyectos web.

TRANSCRIPT

Page 1: Less CSS PreProcessor

LESS Preprocessor Información tomada de: http://lesscss.org/ Latest version at the moment of writing: 1.7.4  Less is a CSS pre­processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.  CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years.  

Features of LESS ● Variables ● Mixins ● Nested rules ● Media query bubbling and nested media queries ● Operations ● Functions ● Namespaces & Accessors ● Scope ● Comments ● Importing 

 

Variables

 

Documento creado por Francisco Quintero 

Page 2: Less CSS PreProcessor

 

Mixins Mixins are a way of including ("mixing in") a bunch of properties from one rule­set into another rule­set. 

  

Operations Any number, color or variable can be operated on. 

  

Documento creado por Francisco Quintero 

Page 3: Less CSS PreProcessor

Functions Less provides a variety of functions which transform colors, manipulate strings and do maths. 

 

Possible Issues using a CSS Preprocessor  Thought by Amber Weinberg on her article about possible issues using a CSS preprocessor Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?  

Referencias http://www.vanseodesign.com/css/css­preprocessors/ http://www.amberweinberg.com/januarys­12412­researching­less­sass/ http://lesscss.org/features/  

Documento creado por Francisco Quintero