SASS – Syntactically Awesome Style Sheets

CSS vs SASS

A la hora de escribir nuestras hojas de estilo podemos basicamente hacer uso de dos sintaxis:
CSS (Cascading Style Sheets) u Original SASS (Syntactically Awesome Style Sheets).

SASS elimina muchos de los elementos CSS que se consideran innecesarios, obligando a estructurar nuestras reglas indentadamente para que la semántica que aportan dichos elementos quede implícita en la estructura.

En vez de el código engorroso de CSS en el cual repetimos los selectores continuamente:
[css]
/*CSS*/
#content { border: 1px solid black; }
#content p.info { color: #fff; }
#content p.info a { text-decoration: none; }
[/css]

SASS ofrece la posibilidad por ejemplo de anidar selectores dentro de otros, eliminando la repetición continua de elementos, como así también la posibilidad de eliminar llaves, punto-coma, etc.

[css]
/*SASS*/
#content
border: 1px solid black
p.info
color: #fff
a
text-decoration:none
[/css]

Es decir que no tendremos que repetir las cadenas de selección completas pues SASS se encargará de introducirlas cuando lo compilemos a CSS, con lo cual no solo ganamos en limpieza, sino que el documento queda estructurado de una forma más natural, pues el anidamiento de selectores está más alineado con el anidamiento real que esperamos encontrar en el documento HTML que estamos estilizando.


SASS quiere evitar que repitamos elementos en nuestra maquetación CSS. Por ese motivo, además de anidar selectores también podremos anidar propiedades de forma que no tengamos que repetir constantemente cosas como “border-left”.

[css]
/* SASS */ /* CSS generado */
.bordemolon .bordemolon {
border: border-style: solid;
style: solid border-left-width: 4px;
left: border-left-color: #888;
width: 4px border-right-width: 2px;
color: #888 border-right-color: #ccc; }
right:
width: 2px
color: #ccc
[/css]


SASS introduce la posibilidad de definir variables, donde las especificaremos prefijándoles el símbolo $. Estas variables se comportan como atributos CSS, y su valor puede ser cualquier valor que pudiera adquirir cualquier atributo CSS.
Una variable se podrá definir fuera o dentro de algún selector. Si se define fuera, dicha variable será global y podrá utilizarse en cualquier bloque, pero si se define dentro de un selector, la variable será local y únicamente se podrá utilizar en el selector que la contiene y en sus selectores anidados.

[css]
/* SASS */ /* CSS generado */
$color_link: blue a {
$default_border: 1px solid black color: blue;
$std_margin: 5px border: 1px solid black;
a margin: 5px 0px 5px 0px;
color: $color_link }
border: $default_border
margin: $std_margin 0px $std_margin 0px
[/css]


Otra funcionalidad que nos ofrece SASS es poder realizar operaciones aritméticas sobre los valores de las propiedades. Podemos por ejemplo utilizar los 4 operadores aritméticos +, -, * y / (suma, resta, multiplicación y división).

[css]
/* SASS */ /* CSS generado */
$width-menu: 500px .menu {
$num-botones: 10 width: 500px;
.menu }
width: $width-menu .menu .boton {
.boton width: 50px;
width: $width-menu / $num-botones
[/css]

El listado completo de funciones podemos encontrarlo en la guía de referencia de SASS.


SASS nos facilita el desarrollo ofreciéndonos una función de importación @import que nos permite desglosar las reglas de nuestro proyecto en tantos ficheros como deseemos, para luego poder indicarle a SASS que compile dichos ficheros por separado o todos en un único fichero CSS.

[css]
/* Contenido de fichero colors.sass */ /* Generado test.css */
$color: #aaaaaa p em {
p color: #aaaaaa;
em }
color: $color p.test em {
color: #aaaaaa
/* Contenido de fichero test.sass */ }
@import «colors»
p.test
em
color: $color
[/css]


Otra función muy utilizada en SASS es mixin, un fragmento de código SASS que podremos reutilizar para aplicar a los selectores que deseemos. Podríamos verlos como recetas donde agruparemos
distintas reglas que luego se aplicarán a aquellos selectores a los que se asocie el mixin.
Para definirlos utilizaremos la palabra clave @mixin seguida del nombre que le queramos dar, seguido del bloque de reglas que queramos incoporar dentro de él.
Para incluìrlo utilizaremos la palabra clave @include seguida del nombre del mixin.

[css]
/* SASS */ /* CSS generado */
$azul: #165BFF .content a {
@mixin link color: #165bff;
color: $azul text-decoration: none; }
text-decoration: none .content a:hover {
&:hover color: #7ca3ff; }
color: lighten($azul, 20)

.content
a
@include link
[/css]


Las variables en SASS no solo las podremos utilizar para asignar valores a las propiedades. También podremos utilizarlas para formar el nombre de las propiedades o incluso los propios selectores. Solo debemos utilizar #{$variable} donde queramos que SASS sustituya el texto por el valor de la variable.

[css]
/* SASS */ /* CSS generado */
$posicion_borde: left .coche.clio {
@mixin coche($marca, $color) border-left: 2px;
.coche.#{$marca} background-color: «green»;
border-#{$posicion_borde}: 2px background-image: url(«images/clio-green.jpg»);
background-color: $color }
background-image: url(‘images/#{$marca}-#{$color}.jpg’)

@include coche(‘clio’, ‘green’);
[/css]


SASS nos ofrece la utilización de estructuras de control: @if, @each, @for y @while, que nos permitirán incluir estilos en base a ciertas condiciones.
Estas directivas van principalmente enfocadas en la generación de mixins o funciones reutilizables.

[css]
/* SASS @if */ /* CSS Generado */
$animal: gato p {
p border: 2px solid black;
@if $animal == gato color: blue; }
color: blue
@else if $animal == perro
color: red
@else if $animal == caballo
color: green
@else
color: black
[/css]

[css]
/* SASS @for */ /* CSS Generado to */ /* CSS Generado through */
@for $i from 1 to 3 .casitodos-1 { .todos-1 {
.casitodos-#{$i} { width: 2em * $i } width: 2em; } width: 2em; }
@for $i from 1 through 2 .casitodos-2 { .todos-2 {
.todos-#{$i} { width: 2em * $i } width: 4em; } width: 4em; }
[/css]

[css]
/* SASS @each */ /* CSS Generado */
@each $animal in puma, sea-slug .puma-icon {
.#{$animal}-icon background-image: url(«/images/puma.png»); }
background-image: url(‘/images/#{$animal}.png’) .sea-slug-icon {
background-image: url(«/images/sea-slug.png»); }
[/css]

[css]
/* SASS @while */ /* CSS Generado */
$i: 4 .item-4 {
@while $i > 0 width: 8em; }
.item-#{$i} { width: 2em * $i } .item-2 {
$i: $i – 2 width: 4em; }
[/css]


En muchas ocasiones nos encontramos con la situación en la que una clase tiene todos los estilos de otra clase, además de los suyos propios. En esos casos podremos hacer uso de @extend, el cual nos permite indicar una herencia entre clases.

[css]
/* SASS */ /* CSS Generado */
.alerta .alerta, .alertaCritica {
background: orange background: orange;
display: block display: block;
font-weight: bold font-weight: bold; }
.alertaCritica .alertaCritica {
@extend .alerta background: red;
background: red }
[/css]


Otra funcionalidad que nos ofrece SASS es la posibilidad de crear plantillas destinadas exclusivamente a ser extendidas, de forma que si no las utilizamos, no se generará ningún CSS asociado. Estas plantillas se definen incluyendo un selector ficticio que empieza por % y que utilizaremos como identificador de la plantilla, que será sustituirdo por la clase que está extendiendo a la plantilla.

[css]
/* SASS */ /* CSS generado */
#cuerpo a%plantilla #cuerpo a.alerta {
font-weight: bold font-weight: bold;
font-size: 2em font-size: 2em; }

.alerta
@extend %plantilla
[/css]


Unificación con prefijos de navegadores y cross-browsing: Al utilizar algunas propiedades CSS3 es conveniente incluir la definición de las versiones con prefijos de cada navegador. Una forma fácil de trabajar con ellos sería definirnos un mixin en SASS para su incorporación.

[css]
/* SASS */
@mixin prefix($name, $property) /* CSS generado */
#{$name}: $property .redondo {
-webkit-#{$name}: $property border-radius: 1px 1px 1px 1px;
-ms-#{$name}: $property -webkit-border-radius: 1px 1px 1px 1px;
-moz-#{$name}: $property -ms-border-radius: 1px 1px 1px 1px;
-o-#{$name}: $property -moz-border-radius: 1px 1px 1px 1px;
-o-border-radius: 1px 1px 1px 1px; }
.redondo
@include prefix(border-radius, 5px 5px 5px 5px)
[/css]


Para empezar a usar SASS necesitamos de 3 cosas:

1) SASS
2) Compass: open-source Framework para CSS.
3) Scout: aplicación multiplataforma para administrar y hacer build de documentos SCSS/SASS corriendo el framework Compass. Instalador.

SASS está escrito en Ruby, y consta de un compilador encargado de traducir nuestros ficheros en sintaxis SASS a CSS.

En resumen, debemos descargar ruby y luego en ejecutar por consola:
>gem install sass
>gem install compass

En mi opinión personal, SASS se está incorporando cada vez más como herramienta de trabajo en los proyectos, con vista en el futuro de estandarizar sus reglas en las directivas de los navegadores web’s más populares. Esto es: browsers que interpretarán directamente las instrucciones escritas en SASS.
Punto importante: SASS logra su mayor eficiencia en proyectos nuevos o recién comenzados.

Tags

Access top talent now!

Related

Get in Touch