CSS Preprocessors . Sass 101Lourdes Montano

./Hola, soy Lourdes!

Presentation Code Developer @ R/GA Buenos Aires

@loumontano

./Agenda

./ Qué es Sass

./ Setup

./ Estructura de archivos

./ Características

./ Mixins útiles

./ Manejo responsable de Sass

Qué es Sass? Cómo funcionan los pre-procesadores?

- Es una extensión de CSS- Facilita la escritura y organización de CSS - Sintaxis simple- Reusabilidad- Genera CSS como lo conocemos...mucho más rápido!

Setup

CompassGrunt

http://thesassway.com/beginner/getting-started-with-sass-and-compasshttp://jforjs.com/sass-compilation-with-grunt/http://sass-lang.com/install

Sass Install

Estructura de archivos

Partials - Sub-archivos compilados en un sólo archivo CSS@import - Código utilizado para determinar el órden de compilación en el output de CSS

./Características de Sass

Características de Sass

- Variables- Anidamiento- Pseudo selectores- Mixins- Extends / Placeholders- Operadores matemáticos- Funciones- Control directives

Variables

- Funcionan como las variables de otros lenguajes (placeholder name, scope, etc.)- Pueden usarse: valores de colores, textos, booleans, numbers, etc.

Anidamiento

- Más rápido de escribir y fácil de leer- Seguir la regla de 3 a 4 niveles de anidamiento máximo (checkear código generado)

Pseudo Selectores

Reusabilidad

@mixin

- Son conjuntos de declaraciones que se reutilizan- Usar para manipular valores dinámicos- Muy útiles para los vendor prefixes- Utilizados para reutilizar reglas, no valores

@extend

- Sirve para compartir propiedades entre reglas sin pasar parametros.- Punto en contra: repite en el output el nombre de la clase extendida

@extend + %placeholder

- El placeholder no se compila en el output- Sus propiedades pueden ser extendidas mediante @extend

Funciones

Operadores matemáticos

- Operadores matemáticos + - * / % son aplicables a números variables

Funciones nativas de Sass

- Soportan operadores matemáticos- Existen funciones para colores HSL (Hue, Saturation, Lightness y Opacity)

Funciones custom

- Permiten cálculos- A diferencia de un @mixin, se puede hacer @return de un valor que se quiera obtener

Control

Control directives @if

Control directives @for

http://codepen.io/loumontano/pen/WbzBgz?editors=010

Control directives @each

Control directives @while

./Mixins útiles

Opacity

Clearfix

Vertical align

Media Queries - Breakpoints

Grids

Animations

http://codepen.io/loumontano/pen/eJByH

Transitions

./Manejo responsable de Sass

Pensar en un pre-procesador como una lupa: puede convertir buen CSS en algo genial, pero mal CSS en algo terrible. No es una varita mágica.

Harry Roberts

Mantener el códigoes nuestro trabajo

Manejo responsable de Sass

Puntos a tener en cuenta

- Estructurar bien los archivos- Buen manejo de las variables- Usar mixins con valores dinámicos, de lo contrario usar extend- Usar funciones para cálculos- Limitar anidado: Máximo 3 o 4 niveles- Al igual que CSS, evitar la especificidad- Checkear el código generado en CSS

Conclusiones

- Facilita la escritura y organización de CSS- Permite funciones, cálculos y manejo de variables- Mucha documentación disponible- Prestar atención al código generado- Sass ayuda a escribir CSS más rápido, no mejor.

Links

http://sass-lang.com/

http://terrificwebdesign.net/converting-css-sass/

http://thesassway.com/advanced

http://sass-guidelin.es/

http://sass-compatibility.github.io/

http://sassmeister.com/

http://thesassway.com/

http://www.sitepoint.com/html-css/css/sass-css/

http://jaredhardy.com/sassy-buttons/

http://bourbon.io/

./Gracias!@loumontano