Sass 101

1. CSS Preprocessors . Sass 101
Lourdes Montano

2. ./Hola, soy Lourdes!
Presentation Code Developer
@ R/GA Buenos Aires
@loumontano

3. ./Agenda
./ Qué es Sass
./ Setup
./ Estructura de archivos
./ Características
./ Mixins útiles
./ Manejo responsable de Sass

4. 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!

5. Setup
CompassGrunt
http://thesassway.com/beginner/getting-started-with-sass-and-compass
http://jforjs.com/sass-compilation-with-grunt/
http://sass-lang.com/install
Sass Install

6. 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

7. ./Características de Sass

8. Características de Sass
- Variables
- Anidamiento
- Pseudo selectores
- Mixins
- Extends / Placeholders
- Operadores matemáticos
- Funciones
- Control directives

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

10. 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)

11. Pseudo Selectores

12. Reusabilidad

13. @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

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

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

16. Funciones

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

18. Funciones nativas de Sass
- Soportan operadores matemáticos
- Existen funciones para colores HSL (Hue, Saturation, Lightness y Opacity)

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

20. Control

21. Control directives @if

22. Control directives @for
http://codepen.io/loumontano/pen/WbzBgz?editors=010

23. Control directives @each

24. Control directives @while

25. ./Mixins útiles

26. Opacity

27. Clearfix

28. Vertical align

29. Media Queries - Breakpoints

30. Grids

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

32. Transitions

33. ./Manejo responsable de Sass

34. 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

35. Mantener el código
es nuestro trabajo

36. Manejo responsable de Sass

37. 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

38. 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.

39. 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/

40. ./Gracias!
@loumontano