CSS Preprocessors - Sass
1 recomendación1,646 vistas
Sass es una extensión de CSS que facilita la escritura y organización del código CSS a través de características como variables, anidamiento, mixins, funciones y directivas de control. El documento explica cómo configurar Sass, su estructura de archivos, las características principales como variables, mixins y funciones, y recomendaciones para un manejo responsable de Sass como limitar el anidamiento y revisar el código CSS generado.
CSS Preprocessors - Sass
- 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!
- 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
- 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)
- 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
- 25. ./Mixins útiles
- 26. Opacity
- 27. Clearfix
- 28. Vertical align
- 29. Media Queries - Breakpoints
- 30. Grids
- 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.