{"id":1028,"date":"2015-09-04T15:25:12","date_gmt":"2015-09-04T15:25:12","guid":{"rendered":"http:\/\/maquetando.com\/?p=1028"},"modified":"2015-09-04T16:46:50","modified_gmt":"2015-09-04T16:46:50","slug":"sass-y-less-el-futuro-de-css","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/sass-y-less-el-futuro-de-css\/","title":{"rendered":"SASS y LESS : El presente de CSS"},"content":{"rendered":"

\"less-vs-sass-its-time-to-switch-to-sass-by-Zing-Design\"<\/a><\/p>\n

A medida que la web sigue avanzando m\u00e1s personas est\u00e1n recurriendo a los\u00a0pre-procesadores CSS (si sigues escribiendo\u00a0CSS puro me temo que \u00a0estas perdiendo la mitad tu vida detr\u00e1s de ese ordenador) \u00a0 hoy hablaremos de LESS y SASS\u00a0,\u00a0\u00a0no hay duda\u00a0de que ambos son los preferidos por la comunidad, tambien esta stylus pero lo abordemos en otro post .<\/p>\n

\u00bfQue es un pre-procesador CSS?<\/h3>\n

Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-c\u00f3digo CSS que luego ser\u00e1 convertido a CSS real. Ese pseudo-c\u00f3digo se conforma de variables, condiciones, bucles o funciones. Podr\u00edamos decir que tenemos un lenguaje de programaci\u00f3n que genera CSS.<\/p>\n

El objetivo de estos preprocesadores es tener un c\u00f3digo m\u00e1s sencillo de mantener y editar. Los preprocesadores incluyen caracter\u00edsticas tales como variables, funciones, mixins, anidaci\u00f3n o modularidad.<\/p>\n

SASS<\/h2>\n

\"sass\"<\/a><\/p>\n

SASS se desarrolla en 2007 (si desde 2007 hay pre-procesadores, muchos los descubrimos a\u00f1os despues) , SASS ha convertido en el pre-procesador mas utilizado – y por una buena raz\u00f3n. A pesar de que ha existido durante casi una d\u00e9cada los desarrolladores\u00a0detr\u00e1s SASS siguen ampliar su funcionalidad .<\/p>\n

SASS sobresale al utilizarse con frameworks como Compass y Bourbon , ya que estos anexan la funcionalidad que quiz\u00e1 SASS deber\u00eda tener de forma nativa.<\/p>\n

Sintaxis<\/h3>\n

SASS permite el uso de dos sintaxis diferentes para crear sus archivos. La primera, conocida como SCSS (del ingl\u00e9s, Sassy CSS) .<\/p>\n

Adem\u00e1s, SCSS es capaz de entender la mayor\u00eda de hacks de CSS y la sintaxis espec\u00edfica de los navegadores, como por ejemplo la vieja sintaxis filter de Internet Explorer. Obviamente esta sintaxis b\u00e1sica de CSS se ha mejorado con las caracter\u00edsticas de Sass.<\/p>\n

Los archivos creados con esta sintaxis utilizan la extensi\u00f3n .scss.<\/p>\n

\/\/ Variable\r\n$primary-color: hotpink;\r\n\r\n\/\/ Mixin\r\n@mixin border-radius($radius) {\r\n    -webkit-border-radius: $radius;\r\n    -moz-border-radius: $radius;\r\n    border-radius: $radius;\r\n}\r\n\r\n.my-element {\r\n    color: $primary-color;\r\n    width: 100%;\r\n    overflow: hidden;\r\n}\r\n\r\n.my-other-element {\r\n    @include border-radius(5px);\r\n}<\/pre>\n
La segunda sintaxis, conocida como \u00absintaxis indentada\u00bb o simplemente \u00absintaxis sass\u00bb permite escribir los estilos CSS de manera m\u00e1s concisa. En este caso, el anidamiento de selectores se indica con tabulaciones en vez de con llaves y las propiedades se separan con saltos de l\u00ednea en vez de con puntos y coma.<\/p>\n
\/\/ Variable\r\n!primary-color= hotpink\r\n\r\n\/\/ Mixin\r\n=border-radius(!radius)\r\n    -webkit-border-radius= !radius\r\n    -moz-border-radius= !radius\r\n    border-radius= !radius\r\n\r\n.my-element\r\n    color= !primary-color\r\n    width= 100%\r\n    overflow= hidden\r\n\r\n.my-other-element\r\n    +border-radius(5px)<\/pre>\n
Los archivos creados con esta segunda sintaxis utilizan la extensi\u00f3n .sass<\/p>\n
Algunos dise\u00f1adores consideran que esta segunda sintaxis es m\u00e1s sencilla de leer y m\u00e1s r\u00e1pida de escribir que SCSS. En cualquier caso, las dos sintaxis tienen exactamente las mismas funcionalidades\u00a0.<\/p>\n
Una de las ventajas de\u00a0SASS\u00a0es que los archivos creados con una sintaxis pueden importar cualquier archivo creado con la otra sintaxis. Adem\u00e1s, dispones de una utilidad para la l\u00ednea de comandos que te permite convertir una sintaxis en otra.<\/p>\n
Sass incluye las siguientes caracter\u00edsticas:<\/h3>\n