Sass_Logo_Color.svg_

Hoy os traigo el contenido del taller de SASS que impartí hace unas semanas conjuntamente con mi compañero Pixeltomas.

Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS escrita en RUBY que añade características muy potentes y elegantes a este lenguaje de estilos. Sass permite el uso de variables, reglas CSS anidadas, mixins, importación de hojas de estilos y muchas otras características, al tiempo que mantiene la compatibilidad con CSS.

Las VENTAJAS de usar SASS se basan en los siguientes puntos:

  • Lo que ya conocíamos de los Superpoderes CSS!!
  • Estructuración de las hojas de estilo
  • Facilidad para su mantenimiento
  • Reutilización y limpieza del código
  • Dotar de semántica los proyectos

INSTALACIÓN

Existen dos formas de instalar SASS,una hacerlo por consola con previa instalación de RUBY o a través de una aplicación preprocesador(Prepros). En cualquiera de las formas podemos crear archivos de extensión .sass o archivos de extensión .scss

En nuestro caso usaremos archivos de extensión .scss y la herramienta PREPROS.

Añadiendo archivos

Los archivos parciales en Sass son usados con la directiva @import.

Supongamos que tenemos un archivo parcial llamado _menu.scss.
Si queremos compilarlo, el proceso es el siguiente:

  • Añadimos esta línea al archivo maestro style.scss: ‘@import _menu.scss’
  • Compilamos style.scss y obtenemos el css convencional con los estilos que hemos importado de menu.scss en style.css (Resultado final)

* No tengais miedo a separar vuestras hojas de estilos en pequeños fragmentos, todo lo contrario, es importante hacerlo, a medida que el proyecto en el que estamos trabajando vaya tomando forma y se haga cada vez más grande, nos damos cuenta que utilizar este recurso es la tarea más maravillosa que han podido hacer. Divide y vencerás.

Sintaxis:

Crear variables en Sass:

Piensa en las variables como una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. Sass utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable.Existen de dos tipos,normal y map, A continuación un ejemplo de cada una de ellas:

Variable normal

Variable map

Podemos definir una variable con varios valores dentro , esto es muy útil por ejemplo para definir los tamaños de letra de un proyecto,los puntos de corte como en el ejemplo,distintos niveles de z-index etc.. Más abajo veremos como usar facilmente estos datos.

Anidar estilos en Sass:

Nos permite crear hojas hojas de estilos con jerarquías o niveles.
Es primordial tener siempre presente no abusar de esta característica, la clave para que nuestras hojas de estilos sean claras y mantenibles es tratar en lo posible de que el anidamiento no sea mayor a tres o cuatro niveles.

Un punto importante que podemos apreciar en el ejemplo anterior, es el símbolo &, el cual hace referencia al elemento padre. En nuestro ejemplo se refiere a la etiqueta enlace “a”.

Propiedades anidadas:

CSS define varias propiedades cuyos nombres parecen estar agrupados de forma lógica. Así por ejemplo, las propiedades font-family, font-size y font-weight están todas relacionadas con el grupo font. En CSS es obligatorio escribir el nombre completo de todas estas propiedades. Sass permite utilizar el siguiente atajo para definir las propiedades relacionadas:

Operadores (Operators):

Realizar operaciones matemáticas en CSS, es posible gracias a Sass. Contamos con un puñado de operadores: (+, -, *, / y %) que trabajan de la misma forma que las operaciones matemáticas básicas que aprendimos en la escuela.

Supongamos que deseamos crear un simple grid, basado en 960px y que el ancho de cada elemento sea expresado en porcentajes:

Extends / Placeholders:

Es una de las más poderosas características de Sass y al mismo tiempo la más peligrosa. Nos permite crear un fragmento de estilos que luego podamos reutilizar fácilmente en cualquier componente. Los Extends nos ayudan a escribir Sass haciendo uso del principio DRY(Don’t repeat yourself)

Básicamente nos permite generar menos CSS con mayor cantidad de selectores.

Como usarlo:

Para declarar y crear un fragmento de estilos que necesitamos reutilizar, usamos el signo % (porcentaje) seguido de un nombre, sin espacios. Luego, para imprimir o reutilizar el Extend dentro de un estilo o componente, usamos la palabra clave @extend seguido de un espacio y por último, el nombre que asignamos a nuestro fragmento.

¡No abuses de los extends! , PUEDES LLEGAR A AGRUPAR DEMASIADOS ELEMENTOS.

Mixins:

Nos permiten definir estilos que puedan ser reutilizados en nuestro proyecto y a diferencia de los extends permiten recibir argumentos y crear componentes más complejos.

Para crearlos debemos utilizar el signo de arroba (@) seguido de la palabra clave mixin y por último el nombre que queramos darle al mixin. Luego, para declararlo dentro de un componente, usamos la palabra clave @include, seguido de un espacio, el nombre y por último entre paréntesis () escribimos los argumentos requeridos por nuestro Mixin. Los argumentos son opcionales.

Veamos unos ejemplo:

Centrar y dar un ancho máximo igual a $pagemaxwidth.

 

Añadir los prefijos a la propiedad css que queramos.

Crear una media query

Consultar la propiedad map-has-key

Consultar la propiedad map-get

Tipo de dato Maps:

Supongamos que necesitamos crear una serie de botones para compartir contenido y nos exigen tres: Twitter, Facebook y envío por correo. Declaramos una variable Maps y agregamos en ella los tres colores que vamos a utilizar en nuestros estilos:

Ahora utilizaremos la directiva @each para acceder a las llaves y valores de la variable $colors y con ello generaremos los estilos de los botones, de la siguiente manera:

Condicionales

La directiva @if:

Podemos aplicar la condición if a una hoja de estilos .scss que nos permite cargar dichos estilos en función del estado de la variable.

La directiva @for

Muestra repetidamente un conjunto de estilos,en el siguiente ejemplo vemos como nos sirve para crear un grid de celdas con distintos tamaños.

La directiva @each:

La sintaxis habitual de la directiva @each es la siguiente ‘@each $var in ‘. El valor $var puede ser cualquier variable y es una expresión *SassScript** que devuelve una lista o un mapa.

El funcionamiento de @each es el siguiente: se recorre toda la lista o mapa y en cada iteración, se asigna un valor diferente a la variable $var antes de compilar los estilos. Ejemplo:

Asignación múltiple:

Como los mapas se consideran listas formadas por pares clave: valor, también en este caso se puede utilizar la asignación múltiple. Ejemplo:


Funciones

Sass viene por defecto con una serie de Funciones (Muy similares a los mixins) que nos ayudan a realizar infinidad de operaciones. Si estás interesado en ellas, conviene que consultes la documentación oficial:

http://sass-lang.com/documentation/Sass/Script/Functions.html

Nosotros nombraremos algunas a modo de curiosidad.

Si las funciones por defecto no cumplen nuestros requerimientos, Sass nos permite crearlas fácilmente. Para declarar una función debemos utilizar un arroba seguido de la palabra clave function (@function), luego el nombre y los argumentos requeridos.

Vamos a crear una Función básica en Sass:

Estructura de directorios SASS

Como hemos explicado , una de las ventajas de SASS es que nos permite crear una arquitectura de hojas de estilos estructurada y fácil de manejar. Para ello necesitamos tener una estructura de directorios adecuada que podamos usar en cada proyecto y definir que elementos van en cada carpeta.

Organización

Los archivos de **SCSS** están todos dentro de la carpeta scss y distribuidos de la siguiente manera:

Gracias a los comentarios BEM, una búsqueda cmd/ctrl + f en nuestro editor que empiece por $NOMBREDESECCION nos ayudará mucho a encontrar el contenido.

A su vez están todas las secciones separadas unas de las otras para ubicar rápidamente cuando echamos un vistazo.

El archivo _debug.scss lo usamos para tener una pequeña guía de la semántica de tu documento html.

El archivo _specifics.scss es donde implementamos todos los selectores que se usen en situaciones concretas (específicas) como por ejemplo align-right, float-right, etc…

Configuración de SASS:

settings.scss

Configura primeramente el archivo lib/settings.scss.

Pasa a configurar las variables y diferentes opciones de la atmósfera de diseño, donde podremos configurar colores, fuentes, tamaños, etc…

En la primera sección del archivo podemos elegir que módulos inlcuir o no cambiando las variables a true o false:

Si uno de ellos no se utiliza, pasadlo a false, así no cargamos CSS de más.

Breakpoints

Los breakpoints los he colocado en EM en vez de pixels para que el diseño no se vea afectado por acciones como el ZOOM. Para más info leer a [Chris Coyer](http://css-tricks.com/why-ems/) y a [Lyza Gardner](http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/) con argumentos al respecto.

Este es un mapa de Sass que podemoa modificar, añadir o quitar variables. Estas variables las usaremos luego en un _mixin_ para llamar a los mediaqueries:

Por último decir que si pensáis que falta algo relevante a mencionar, o si os ha gustado el contenido del taller/curso, podéis dejar un comentario aquí o en twitter.

Salud!