Home
Curso html5 y Sass (2): ¿ Que es sass ?, pruébalo en un instante

Curso html5 y Sass (2): ¿ Que es sass ?, pruébalo en un instante

Css tutoriales Tutoriales de Html 2 comentarios ,

Esta es la primera entrada sobre sass dentro del Curso Html5 y sass, como ya comenté en la introducción del curso, separaremos los contenidos entre Html5 y Sass y los juntaremos cuando sea necesario.

Hoy vamos a centrarnos en los beneficios que obtendrás al usar el preprocesador SASS, explicaremos también que es sass, cómo instalarlo y usaremos un ejemplo como introducción a sass.

¿ Qué es sass ?

Sass (Syntactically Awesome Style Sheets) es un preprocesador CSS, esto significa que se puede usar como lenguaje de script con elementos de programación sacados de Ruby y que ayudan a manipular el resultado de tus archivos css. Puedes usar variables, hacer operaciones matemáticas básicas, definir y llamar a funciones, manipular colores, etc.

Escribimos sintaxis sass dentro de ficheros con extensión .scss, que posteriormente compilamos para dar lugar a los ficheros .css.

Sintaxis: ¿Ficheros .scss o ficheros .sass?

Sass puede escribirse con dos tipos de sintaxis:

1. SCSS. Es su sintaxis más reciente introducida en Sass 3 y es totalmente compatible con la sintaxis de CSS3 y se entiende con la mayoría de sus hacks. El anidamiento de los selectores se indica con llaves {} y los archivos que escribamos con esta sintaxis deben tener la extensión .scss.

2.SASS. La segunda sintaxis la llaman también la sintaxis indentada, ya que el anidamiento de los selectores se realiza con tabulaciones en vez de con llaves, y las propiedades css se separan con saltos de línea en vez de usar punto y coma. Los archivos escritos con esta sintaxis deben terminar en .sass.

Estas dos sintaxis tienen las mismas funcionalidades, solo se diferencian en la forma de definir los estilos.

Nosotros vamos a usar la sintaxis SCSS, ya que su sintaxis se asemeja más a CSS y su integración con éste es más sencilla. Además nos obliga anidar de forma adecuada sin pasarnos de selectores específicos,  si usas la sintaxis SASS es muy fácil caer en el lado oscuro de la anidación con tabulador y acabas teniendo selectores muy largos (queremos evitar esto).

Ventajas de usar sass:

  • Mejor organización de tu código.
  • Una mejor organización en tus directorios, como resultado de trabajar con hojas de estilo más modulares.
  • Escribirás código más rápido.
  • Funcionalidades relacionadas con la programación como estructuras de control de flujo, variables, arrays, etc.
  • Ofrece varios tipos de salidas de CSS, incluyendo los estilos css ya minificados (minified), listos para ser desplegados en un entorno de producción.
  • Te ayuda a automatizar con el uso de directivas de control básicas, como los mixin, que te permiten definir estilos reutilizables en toda tu hoja de estilos. Se añaden con un @include a cualquier clase.
  • Se reducen las peticiones HTTP al combinar todas las hojas de estilo en una sola.
  • ¡Y muchas más!

Instalar sass

Esto lo vimos en la iniciación del Curso HTML5 y SASS, para los 3 sistemas operativos más usados. No obstante no está demás recordarlo para los que han aterrizado aquí.

Vamos a usar el lenguaje de programación Ruby y su gema SASS para compilar nuestros ficheros .scss.

Instalar Sass en Ubuntu

Primero debes instalar el lenguaje de programación Ruby, mediante la terminal. Antes de nada, actualizamos el gestor de paquetes:

Luego instalamos cURL, que es una herramienta para transferir archivos con sintaxis URL ( soporta FTP, FTPS, HTTP, etc):

Ahora usamos cURL para instalar RVM (Ruby Version Manager), que te permite instalar varias versiones de Ruby en tu sistema:

*Posibles problemas-> Puede que al usar curl el terminal te reporte este error:

Es una característica de seguridad introducida en la última versión de RVM, simplemente ejecuta el comando para importar la key, en mi caso es:

Ahora sí, una vez arreglado eso vuelve a ejecutar: sudo \curl -L https://get.rvm.io | bash -s stable --ruby y listo.

Ya tienes RVM instalado. Si ya tenías RVM instalado actualiza a su última versión e instala Ruby:

*Posibles problemas -> Si te sale No command ‘rvm’ found al ejecutar la instrucción anterior, ejecuta esta instrucción en la terminal:

¡Venga que ya falta poco!, instalamos Ruby de una vez:

Y finalmente compruebas que se ha instalado escribiendo ruby -v, debería mostrarte la consola la versión de Ruby instalada:

Ya tenemos listo Ruby con su última versión estable, ahora le toca a la gema SASS, escribimos esto en el terminal para instalarla:

Al igual que hicimos con Ruby, comprobamos la versión de SASS con esta instrucción:

La versión actual es Sass 3.4.14 (Selective Steve). ¡Ya puedes usar SASS en tu máquina Linux!

Instalar Sass en Mac

¡Anda!, pero si ya Mac OS (Yosemite y Mavericks) viene con Ruby, así que no es necesario instalarlo. Si tienes versiones de Mac OS anteriores simplemente instálalo con Homebrew (deberías usarlo como gestor de paquetes, es muy útil) y este comando en la consola:

Una vez tenemos Ruby instalado puedes instalar Sass del mismo modo que Linux, escribiendo en la consola:

¡Listo!, ya puedes usar Sass en tu Mac.

Instalar Sass en Windows

Instala primero Ruby en Windows descargando y ejecutando el RubyInstaller , le das a siguiente y marcas que te coja el PATH. Luego ejecutas en la consola gem install sass y ¡ya está!

Compilar sass

Recuerda que para compilar simplemente debes situarte con la consola en el directorio donde tienes tu fichero .scss y escribir la instrucción:

sass nombre-del-fichero.scss nombre-del-fichero.css

Esto da como salida un archivo CSS con los estilos que has escrito en Sass.

Sass en Sublime Text

Si estás usando como editor de código Sublime Text 3, recomiendo que te instales el package de SASS para que Sublime Text te resalte con colores lo que escribas con sintaxis Sass en tus ficheros .scss.

Doy por hecho que tienes el Package Control instalado, accede a éste con el atajo Ctrl+Shift+P o cmd+Shift+P si usas un mac y escribe Package Control: install package, le haces un click y se te abre otro desplegable donde escribes Sass, se te listarán varias opciones, elige la primera y listo:

Sass para sublime text

Package sass para sublime text

Elige la primera opción

 

Si usas Brackets como editor de código ya te viene automáticamente el resaltado de los ficheros .scss.

¡Empezamos con SASS ya!

Un poco de anidación (nesting)

Una de las mejores características de sass es que puedes escribir tu código de forma anidada, cada elemento hijo se escribe dentro del árbol padre y anidamos unos selectores dentro de otros.

Por ejemplo, en CSS cuando tenemos selectores muy específicos tenemos que ir escribiendo una y otra vez la cadena de elementos que agrupa ese selector y nos obliga a ir repitiendo esta cadena conforme añadamos más elementos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* CSS */
 
#alert {
    border: 1px solid orange;
}
 
#alert div.info {
    background-color: darkred;
}
 
#alert div.info p.description {
    color: white;
}
 
#alert div.info p.description i {
    color: red;
}

Esto hace que el archivo css acabe siendo poco legible y repitamos demasiadas líneas de código.

Ahora observa el mismo código de arriba escrito en SASS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* SCSS */
 
#alert {
    border: 1px solid orange;
    div.info {
        background-color: darkred;
        p.description {
            color: white;
            i {
                color: red
            }
        }
    }
}

¡Qué maravilla!, al anidar los selectores unos dentro de otros no tenemos que repetir las engorrosas cadenas de selectores, Sass ya se encarga de introducirlas en nuestro CSS que resulta de la compilación del .scss.

Analicemos este ejemplo

Vamos con este ejemplo algo más complejo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@mixin box-shadow($shadow1, $shadow2) {
    -webkit-box-shadow: $shadow1, $shadow2;
    -moz-box-shadow: $shadow1, $shadow2;
    box-shadow: $shadow1, $shadow2;
}
 
$mainColor: #78C0A8;
$complementaryColor: #5E412F;
.pagination {
    margin: 0;
    .item {
        list-style-type: none;
        float: left;
        display: block;
        .link {
            padding: 0.25em 0.5em;
            color: $mainColor;
            text-decoration: none;
        }
        &.active {
            .link {
                cursor: default;
                background-color: transparent;
                border: none;
                @include box-shadow(0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19));
                color: $complementaryColor;
                background-color: $mainColor;
                font-weight: 600;
            }
        }
    }
}

 

En este ejemplo tenemos un componente de paginación, el elemento padre es .pagination, y contendrá una lista de links de paginación.

Te explico lo que ves, lo primero que tienes ante ti es una directiva @mixin. Los mixin se usan para definir estilos reutilizables en todo tu documento, es especialmente útil si queremos usar propiedades de CSS3 experimentales y que requieren prefijos (vendor prefixes), ya que cada navegador interpreta esa propiedad de una manera. Puedes pasarle al mixin un valor como parámetro, en nuestro caso le pasamos dos valores de la sombra $shadow. Veremos con más detalle los @mixin en las próximas entradas:

1
2
3
4
5
@mixin box-shadow($shadow1, $shadow2) {
    -webkit-box-shadow: $shadow1, $shadow2;
    -moz-box-shadow: $shadow1, $shadow2;
    box-shadow: $shadow1, $shadow2;
}

Posteriormente lo añadimos a nuestros estilos con un @include seguido del nombre del mixin.

Debajo del sass mixin tenemos definidas dos variables, una para un color principal y otra para uno secundario. Las variables son en sass otra forma de guardar información que queremos reutilizar en nuestra hoja de estilos. Puedes almacenar colores, fuentes o cualquier valor CSS que vayas a usar luego. Sass usa el símbolo dólar $ para definir las variables:

1
2
$mainColor: #78C0A8;
$complementaryColor: #5E412F;

Otra cosa que mola de sass es que puedes apuntar al nodo padre gracias al operador &, es especialmente útil usar este selector para definir estilos con las pseudo-clases :hover, mira por ejemplo este código:

1
2
3
4
5
6
7
8
9
/* SCSS */
 
.content {
  .slider p {
    &:hover a {
     color: red;
    }
  }
}

Al compilar el archivo .scss da como resultado este estilo css:

1
2
3
4
5
/* CSS */
 
.content .slider p:hover a {
    color: red;
}

En el ejemplo que estamos analizando uso el selector padre para dar estilo a las clases .link dentro del elemento .item con la clase .active.

CSS compilado del ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* CSS */
 
.pagination {
    margin: 0;
}
 
.pagination .item {
    list-style-type: none;
    float: left;
    display: block;
}
 
.pagination .item .link {
    padding: 0.25em 0.5em;
    color: #78C0A8;
    text-decoration: none;
}
 
.pagination .item.active .link {
    cursor: default;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color: #5E412F;
    background-color: #78C0A8;
    font-weight: 600;
}

Resultado:

 

See the Pen aOVJPL by Funny Frontend (@funnyfrontend) on CodePen.

Conclusiones

Supongo que tras saborear un poco el código sass te habrás dado cuenta de que es mucho más legible, organizado y tiene menor número de líneas que el código css.

Como ya comenté en la introducción del Curso Html5 y Sass, se considera buena práctica tener un máximo de 4 niveles de anidación, superar esos 4 niveles implica más tiempo en compilar el .scss, lo que hace que baje el rendimiento general de tu proyecto.

En la siguientes entradas sobre Sass vamos tocar brevemente la mayor parte de su documentación, y también traduciré algunos artículos interesantes de Hugo Giraudel, que es un crack y una especie de gurú de Sass.

Recuerda que el propósito principal del curso es mejorar tu flujo de trabajo (workflow) de forma modular, combinando Html5 semántico y el poder de Sass (ya verás que juntos forman un pequeño framework muy potente) :D.

Curso Html5 y Sass

Related

2 Comentarios

  1. Emilio 24 junio, 2015 Responder

    ¡Hola!

    Muy buen artículo y enhorabuena por el blog. Lo descubrí hace unas semanas y me he llevado una buenísima impresión de lo currado que está 🙂

    En cuanto al artículo, veo que SASS es muy similar a otros preprocesadores de CSS. Yo empecé con Stylus y sigo con él, aunque me parece que SASS es el que más comunidad tiene. ¿Ves alguna ventaja entre SASS y otros preprocesadores?

    Un saludo 🙂

    • amldesign 24 junio, 2015 Responder

      ¡Hola Emilio! , me alegra que te guste lo que se va cociendo en este blog, es muy joven y tiene que crecer a base de feedbacks como el tuyo 😀

      Respecto a lo que comentas, efectivamente todos los preprocesadores de CSS se parecen mucho entre sí, pero parece que actualmente la batalla épica está entre SASS vs LESS . Posiblemente se han hecho populares gracias a que los dos grandes frameworks front-end «rivales», Boostrap y Foundation los usan.

      Stylus personalmente no lo he usado, pero creo que tiene una sintaxis más compleja y variable, y quizás la gente prefiere Sass o Less por sus restricciones, ya que así tienen un código más «universal» para futuros usuarios venideros que lean el código.

      De todas formas los tres son muy potentes, y casi siempre el escoger un preprocesador u otro es cuestión de gustos personales.

      Un saludo 😀

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *