CSS Preprocessors - Sass
-
Upload
lourdes-montano -
Category
Technology
-
view
685 -
download
6
Transcript of CSS Preprocessors - Sass
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