Sass, css con superpoderes
No me andaré por las ramas, si te dedicas al desarrollo web front-end (maquetación, responsive, diseño...) Sass es algo que DEBES conocer.
Si no has hecho tus deberes y aun no lo conoces, ¡vamos a solucionarlo ahora mismo! Lo primero es lo primero ¿que es Sass? Estrictamente hablando, Sass es lo que se llama un lenguaje pre-procesado de css. ¿Y que es eso de un lenguaje pre-procesado? Pues no es más que un lenguaje, como lo puede ser css, que necesita ser "compilado" antes de poder ser usado. En el caso de Sass, es un lenguaje pre-procesado que tiene como objetivo extiender la funcionalidad de nuestras hojas de estilo o, haciendo referencia a su eslogan ¡darle superpoderes! Y aunque esa afirmación puede parecer atrevida, nada más lejos de la realidad y ahora veremos porqué.
Como sabemos, los navegadores, por norma general, interpretan los estilos que nosotros introducimos a traves de ficheros ".css", por lo tanto, si nosotros le pedimos al navegador que interprete un fichecho ".scss", que es la extensión de un fichero de Sass, no va a saber que hacer con él. Y es por esto que se le llama lenguaje pre-procesado, ya que no podemos utilizarlo directamente en nuestras webs, primero tendremos que "procesarlo/compilarlo" para transformarlo en un fichero css que sí podamos utilizar.
Si te dedicas al desarrollo web front-end Sass es algo que debes conocer.
Y ahora os preguntareis: "Pero... si al final se transforma en css, ¿no es css al fin y al cabo?". Y la respuesta es sí, pero imaginad que tenemos que recorrer un determinado camino. Lo hagamos como lo hagamos, al final sencillamente habrémos recorrido el camino, ahora, estaremos de acuerdo en que no es lo mismo hacerlo a pie que en un famante descapotable. Y Sass es sin lugar a dudas el mejor descapotable para recorrer los estilosos caminos que nos deparan.
No os preocupeis si no lo veis del todo claro ahora mismo, despues de unos ejemplos sobre su funcionalidad y como utilizarlo, lo entereis mejor. Así que vamos con lo interesante. ¡Veamos que hace de Sass una herramienta tan imprescindible!
Variables
Aquellos desarrolladores web que utilizan javascript o php, entre otros, disponen de esas preciadas variables para almacenar valiosa información que más tarde podrán usar tantas veces como deseen. ¡¿Por que rayos nosotros no tenemos variables?! Pues aquí llega Sass con sus superpoderes para traernos una de las funcionales más sencillas pero potentes que útilizaremos como podemos ver en nuestro primer ejemplo:
$main-color: #90C3D4;
body {
backgorund-color: $primary-color;
}
Anidado o nesting
Esta es sin duda la funcionalidad más importante en cuanto a estructuración del código. Se acabaron esos selectores infinitos e legibles. La mejor manera de verlo es comparando, así que imaginemos un caso de ejemplo y vamos a ello.
| CSS | SASS |
|
.content article { |
.content { |
Como veis, ahora dentro de un selector ya no solo podremos definir propiedades sino que ahora también podemos utilizar otros selectores pudiendo crear un código mucho más claro y manejable a nivel semántico. Otro punto para Sass.
Parciales e importaciones
Esta funcionalidad está más relacionada con el rendimiento. Css de manera nativa ya permite importar otros ficheros css para poder dividir el código en trozos más pequeños pero en este caso por cada importación habrá una petición para descargar ese fragmento. En Sass, de igual forma podemos utilizar la directiva @import para incluir otros fragmentos de Sass, que tendrán la forma "_name.scss". La diferencia reside en que ya que deberemos compilar el código Sass antes de usarlo, lo que se generará será un único fichero css a incluirá todos los fragmentos de Sass teniendo que hacer, por tanto, una única petición.
Mixins
Los mixins es otra de esas funcionalidad que tras usarla unas cuantas veces pensareis "¿Cómo podía yo vivir sin esto?". Los mixins sería más o menos lo equivalente a funciones en otros lenguajes. Es una manera de agrupar un fragmento de código que luego podremos usar tantas veces y en tantos lugares como queramos. Nuevamente, lo mejor es verlo con un ejemplo.
@mixin button($radius, $color) {
background-color:
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.myButton1 { @include button(6px, #ABC123) }
.myButton2 { @include button(10px, #123ABC) }
En el ejemplo anterior podemos ver que hemos agrupado un fragmento de código para darle estilo a un botón. Además, podemos utilizar variables en el para hacerlo aun más flexible, aunque no es estrictamente necesario. Ahora, cada vez que queramos darle estilo a un botón de nuestra web, solo tendremos que incluir el mixing y ¡voilà!
Sass, desarrollos con estilo
Y esto solo la punta del iceberg de lo que ofrece Sass, no porque sea más complejo de lo visto en esta pequeña presentación, sino por la increible cantidad de posibilidades que ofrece la combinación de todas las funcionalidades que hemos visto y otras que nos hemos dejado en el tintero. Nosotros en Introbay, desde que conicimos Sass, nos enamoramos de él y se convirtió en la piedra angular del estilo de todos nuestros desarrollos web en drupal.
En la web de Sass http://Sass-lang.com/ podeis encontrar toda la información sobre lo que puede ofreceros esta increible herramienta, tanto documentación como ejemplos o como instalarlo en vuestros equipos para comenzar a usarlo. Es una web muy sencilla e intuitiva así que la recomiendo como centro de referencia para vuestros desarrollos con Sass.
Ahora os toca a vosotros descubrir las posibilidades que os ofrece Sass en vuestros desarrollos web, así que para terminar os dejo un enlace a una web que a mi personalmente me encanta:
Ahí podréis llevar a cabo cómodamente todos vuestros experimentos de estilo. Escribid en Sass, mirad como se convierte en css y contemplad el resultado final, todo en el mismo lugar ¿Que más se puede pedir?