Preprocesadores CSS 3

Preprocesadores CSS3EN DIEZ MINUTOS

Prepocesadores CSS3Less y Sass

Prepocesadores CSS3El proceso

Compilación

Online | Offline

NestingSASS

nav ul { margin: 0; padding: 0; list-style: none;}

nav li { display: inline-block;}

nav li .activo { font-weight: bolder;}

NestingSASS nav {

}




NestingSASS nav {

ul {

} li {

.activo {

} }}




NestingSASS nav {

ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block;

.activo { font-weight: bolder; } }}




Nesting y &SASS

a { font-weight: bold; text-decoration: none;}

a:hover { text-decoration: underline;}

a {

}

Nesting y &SASS



a {

&:hover {

}}

Nesting y &SASS



a { font-weight: bold; text-decoration: none;

&:hover { text-decoration: underline; }}

Nesting y &SASS

body.firefox & { font-weight: normal;}

&-sidebar { border: 1px solid;}

Nesting y &SASS

body.firefox & { font-weight: normal;}

body.firefox a { font-weight: normal;}

&-sidebar { border: 1px solid;}

#main-sidebar { border: 1px solid;}

Nesting y namespacesSASS

.funky { font-family: fantasy; font-size: 30em; font-weight: bold;}



.funky { font: {

}}



.funky { font: { family: fantasy; size: 30em; weight: bold; }}







.funky { font: 30em fantasy { weight: bold; }}

VariablesSASS

body { font: 100% Helvetica, sans-serif; color: #333;}

.boton { color: #B8C2E8;}

.titulo { color: #B8C2E8;}

VariablesSASS

body { font: 100% Helvetica, sans-serif; color: #333;}

.boton { color: #B8C2E8;}

.titulo { color: #B8C2E8;}

VariablesSASS

body { font: 100% $fuente; color: #333;}

.boton { color: $color;}

.titulo { color: $color;}

VariablesSASS $fuente: Helvetica, sans-

serif;$color-primario: #333;

body { font: 100% $fuente; color: #333;}

.boton { color: $color;}

.titulo { color: $color;}

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

TiposSASS

Números

TiposSASS

Números

10px 3em 4 5,5 10%

TiposSASS

StringsNúmeros

TiposSASS

StringsNúmeros

“hola mundo” ‘ejemplo’string sin comillas

TiposSASS

Números BooleanosStrings

TiposSASS


null

TiposSASS


null Colores

TiposSASS


null ColoresRed #3E5C12Rgba(255,120,50,0,5)

TiposSASS


null Colores Listas

TiposSASS


null Colores Listas1.5%, 2px, #3E3E3E10px 5px 10em

TiposSASS


null Colores Listas

Diccionarios

TiposSASS


null Colores Listas

Diccionarios

(key1: value1, key2: value2)

TiposSASS


null Colores Listas

Diccionarios

TiposSASS


null Colores Listas

Diccionarios

Cualquier otro tipo built-in de CCS3es considerado como un string sin comillas

Operadores y expresionesSASS

Se soportan expresiones aritméticas y lógicas entre

los tipos built-in de SASS

Operadores y expresionesSASS

Se soportan expresiones aritméticas y lógicas entre

los tipos built-in de SASS

$color == blue3px * 2 #010203 + #040506

#{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



“Hola #{$var + 5}”

Es similar a la interpolación que ofrecen otros lenguajes como PHP, Phyton, Ruby, Scala, Unix

shells, etc

Se puede utilizar en los selectores, en nombres de propiedades y en lugares donde un variable

directamente no se evalúa.





$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}




$name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}

.main { width: calc(100% - #{$width});}

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

MixinsSASS

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; }}

MixinsSASS


p { @include sexy-border(blue);}

h1 { @include sexy-border(blue, 2in);}

MixinsSASS


p { @include sexy-order($color: blue);}

h1 { @include sexy-border($color: blue, $width: 2in);}

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

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

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

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)

CompassSASS

• Librería de funciones

• Muchas funciones cross-browser

• Incluye funciones para crear fácilmente sprites, y “ritmo vertical” del texto

PreprocesadorSASS

• CSS jerarquizado y DRY

• Pero también permiten muy malas prácticas

• Selectores demasiado específicos y muy nesteados

• Mucho cuidado con @extend!

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

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?

¡Gracias!

Documents

Preprocesadores CSS 3