preprocesadores css 3
DESCRIPTION
Slides sobre preprocesadores CSS3 (Sass Less). Prequeña introducción a Sass. Variables, mixins, imports, includes, interpolación, nesting, directivas y @-rules, & selectorTRANSCRIPT
![Page 1: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/1.jpg)
Preprocesadores CSS3EN DIEZ MINUTOS
![Page 2: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/2.jpg)
Prepocesadores CSS3Less y Sass
![Page 3: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/3.jpg)
Prepocesadores CSS3El proceso
Compilación
Online | Offline
![Page 4: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/4.jpg)
NestingSASS
nav ul { margin: 0; padding: 0; list-style: none;}
nav li { display: inline-block;}
nav li .activo { font-weight: bolder;}
![Page 5: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/5.jpg)
NestingSASS nav {
}
nav ul { margin: 0; padding: 0; list-style: none;}
nav li { display: inline-block;}
nav li .activo { font-weight: bolder;}
![Page 6: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/6.jpg)
NestingSASS nav {
ul {
} li {
.activo {
} }}
nav ul { margin: 0; padding: 0; list-style: none;}
nav li { display: inline-block;}
nav li .activo { font-weight: bolder;}
![Page 7: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/7.jpg)
NestingSASS nav {
ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block;
.activo { font-weight: bolder; } }}
nav ul { margin: 0; padding: 0; list-style: none;}
nav li { display: inline-block;}
nav li .activo { font-weight: bolder;}
![Page 8: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/8.jpg)
Nesting y &SASS
a { font-weight: bold; text-decoration: none;}
a:hover { text-decoration: underline;}
a {
}
![Page 9: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/9.jpg)
Nesting y &SASS
a { font-weight: bold; text-decoration: none;}
a:hover { text-decoration: underline;}
a {
&:hover {
}}
![Page 10: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/10.jpg)
Nesting y &SASS
a { font-weight: bold; text-decoration: none;}
a:hover { text-decoration: underline;}
a { font-weight: bold; text-decoration: none;
&:hover { text-decoration: underline; }}
![Page 11: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/11.jpg)
Nesting y &SASS
body.firefox & { font-weight: normal;}
&-sidebar { border: 1px solid;}
![Page 12: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/12.jpg)
Nesting y &SASS
body.firefox & { font-weight: normal;}
body.firefox a { font-weight: normal;}
&-sidebar { border: 1px solid;}
#main-sidebar { border: 1px solid;}
![Page 13: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/13.jpg)
Nesting y namespacesSASS
.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}
![Page 14: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/14.jpg)
Nesting y namespacesSASS
.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}
.funky { font: {
}}
![Page 15: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/15.jpg)
Nesting y namespacesSASS
.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}
.funky { font: { family: fantasy; size: 30em; weight: bold; }}
![Page 16: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/16.jpg)
Nesting y namespacesSASS
.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}
.funky { font: { family: fantasy; size: 30em; weight: bold; }}
![Page 17: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/17.jpg)
Nesting y namespacesSASS
.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}
.funky { font: { family: fantasy; size: 30em; weight: bold; }}
.funky { font: 30em fantasy { weight: bold; }}
![Page 18: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/18.jpg)
VariablesSASS
body { font: 100% Helvetica, sans-serif; color: #333;}
.boton { color: #B8C2E8;}
.titulo { color: #B8C2E8;}
![Page 19: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/19.jpg)
VariablesSASS
body { font: 100% Helvetica, sans-serif; color: #333;}
.boton { color: #B8C2E8;}
.titulo { color: #B8C2E8;}
![Page 20: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/20.jpg)
VariablesSASS
body { font: 100% $fuente; color: #333;}
.boton { color: $color;}
.titulo { color: $color;}
![Page 21: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/21.jpg)
VariablesSASS $fuente: Helvetica, sans-
serif;$color-primario: #333;
body { font: 100% $fuente; color: #333;}
.boton { color: $color;}
.titulo { color: $color;}
![Page 22: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/22.jpg)
VariablesSASS
• Tienen scope.• Con la flag global obtienen alcance global.
• $width: 5em !global• Las asignaciones con la flag default solo se
realizan si la variable no se encuentra inicializada• $font: Helvetica, sans-serif !default
![Page 23: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/23.jpg)
TiposSASS
Números
![Page 24: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/24.jpg)
TiposSASS
Números
10px 3em 4 5,5 10%
![Page 25: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/25.jpg)
TiposSASS
StringsNúmeros
![Page 26: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/26.jpg)
TiposSASS
StringsNúmeros
“hola mundo” ‘ejemplo’string sin comillas
![Page 27: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/27.jpg)
TiposSASS
Números BooleanosStrings
![Page 28: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/28.jpg)
TiposSASS
Números BooleanosStrings
null
![Page 29: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/29.jpg)
TiposSASS
Números BooleanosStrings
null Colores
![Page 30: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/30.jpg)
TiposSASS
Números BooleanosStrings
null ColoresRed #3E5C12Rgba(255,120,50,0,5)
![Page 31: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/31.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas
![Page 32: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/32.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas1.5%, 2px, #3E3E3E10px 5px 10em
![Page 33: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/33.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas
Diccionarios
![Page 34: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/34.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas
Diccionarios
(key1: value1, key2: value2)
![Page 35: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/35.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas
Diccionarios
![Page 36: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/36.jpg)
TiposSASS
Números BooleanosStrings
null Colores Listas
Diccionarios
Cualquier otro tipo built-in de CCS3es considerado como un string sin comillas
![Page 37: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/37.jpg)
Operadores y expresionesSASS
Se soportan expresiones aritméticas y lógicas entre
los tipos built-in de SASS
![Page 38: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/38.jpg)
Operadores y expresionesSASS
Se soportan expresiones aritméticas y lógicas entre
los tipos built-in de SASS
$color == blue3px * 2 #010203 + #040506
![Page 39: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/39.jpg)
#{Interpolación}SASS
#{expr} evalúa la expresión y devuelve el valordel resultado
![Page 40: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/40.jpg)
#{Interpolación}SASS
#{expr} evalúa la expresión y devuelve el valordel resultado
Es similar a la interpolación que ofrecen otros lenguajes como PHP, Phyton, Ruby, Scala, Unix
shells, etc
![Page 41: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/41.jpg)
#{Interpolación}SASS
#{expr} evalúa la expresión y devuelve el valordel resultado
“Hola #{$var + 5}”
Es similar a la interpolación que ofrecen otros lenguajes como PHP, Phyton, Ruby, Scala, Unix
shells, etc
![Page 42: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/42.jpg)
Se puede utilizar en los selectores, en nombres de propiedades y en lugares donde un variable
directamente no se evalúa.
#{Interpolación}SASS
![Page 43: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/43.jpg)
Se puede utilizar en los selectores, en nombres de propiedades y en lugares donde un variable
directamente no se evalúa.
#{Interpolación}SASS
$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}
![Page 44: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/44.jpg)
Se puede utilizar en los selectores, en nombres de propiedades y en lugares donde un variable
directamente no se evalúa.
#{Interpolación}SASS
$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}
.main { width: calc(100% - #{$width});}
![Page 45: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/45.jpg)
Partials e ImportSASS
• Si el archivo a importar es un archivo *.scss o *.sass, se importa el documento en el lugar
• Si es un archivo CSS convencional, se imprime la directiva @import de CSS
@import
![Page 46: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/46.jpg)
Partials e ImportSASS
• Si el archivo a importar es un archivo *.scss o *.sass, se importa el documento en el lugar
• Si es un archivo CSS convencional, se imprime la directiva @import de CSS
@import Partials
• Los archivos comenzados en _underscore son partials
• No se compilan individualmente, sino que se importan
• Se importan @import “partial.scss” sin el underscore
![Page 47: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/47.jpg)
MixinsSASS
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; }}
![Page 48: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/48.jpg)
MixinsSASS
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; }}
p { @include sexy-border(blue);}
h1 { @include sexy-border(blue, 2in);}
![Page 49: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/49.jpg)
MixinsSASS
@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; }}
p { @include sexy-order($color: blue);}
h1 { @include sexy-border($color: blue, $width: 2in);}
![Page 50: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/50.jpg)
MixinsSASS
• Parecido a los MACROS de C
• Se definen con @mixin y se incluyen con @include
• Soportan argumentos variables
• Soportan pasar bloques de SASS como parámetro
![Page 51: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/51.jpg)
DirectivasSASS
• SASS incluye directivas como @extend, que extienden reglas con otras reglas
• Directivas en tiempo de compilación: @warn, @error, @debug
• Directivas de control: @if, @for, @each, @while
![Page 52: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/52.jpg)
FuncionesSASS
• Se invocan con la sintaxis C-style:• functionName(param1,param2)
• Existen funciones predefinidas para colores, listas, diccionarios, selectores, etc
• Soportan named arguments (keyword arguments o pass-by-name)• Color: hsl($hue: 0, $saturation: 100%, $lightness:
50%)
• Se pueden definir con la directiva @function
• O añadiendo métodos Ruby en el fuente
![Page 53: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/53.jpg)
Algunas característicasSASS
• Caching: optimiza la perfomance cacheando los archivos
• Salida a CSS configurable
• Dos sintaxis alternativas: SCSS (compatible con CSS3) y SASS (sintaxis original, mas consisa)
![Page 54: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/54.jpg)
CompassSASS
• Librería de funciones
• Muchas funciones cross-browser
• Incluye funciones para crear fácilmente sprites, y “ritmo vertical” del texto
![Page 55: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/55.jpg)
PreprocesadorSASS
• CSS jerarquizado y DRY
• Pero también permiten muy malas prácticas
• Selectores demasiado específicos y muy nesteados
• Mucho cuidado con @extend!
![Page 56: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/56.jpg)
Buenas prácticasSASS
• No usar estilos inline• No hacer un wrap a una etiqueta si se puede aplicar el
estilo directamente• Usar con cuidado el posicionamiento absoluto• Evaluar unidades absolutas y relativas
• px vs. em vs. %• Block e Inline. Hay que conocer la diferencia
![Page 57: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/57.jpg)
Buenas prácticasSASS
• Usar resetters o un framework• Usar validadores CCS3 y HTML5• Mantener una librería de clases útiles• DRY!• Clases vs ID• Clases genéricas• Clases semánticas vs Clases de presentación: SASS
permite mezclar• ¿Por qué no OOCSS?
![Page 58: Preprocesadores CSS 3](https://reader036.vdocuments.pub/reader036/viewer/2022081520/5695d14f1a28ab9b0295ff98/html5/thumbnails/58.jpg)
¡Gracias!