gotardo gonzález Sintactically Awsome Stylesheets una introducción rápida a viernes 27 de julio de 12

¿y si...? :root { ! var-main-color: blue; } h1 { ! color: $main-color; } CSS Variables Module Level 1 Editor's Draft 15 June 2012 http://dev.w3.org/csswg/css-variables/ ¿variables? ¿while? ¿for? ¿foreach? ¿class? ¿funciones? viernes 27 de julio de 12

Sass es un intérprete de sintaxis escrito en Ruby que nos permite utilizar recursos propios de los lenguajes de programación para facilitarnos la escritura y mantenimiento del código CSS. viernes 27 de julio de 12

instalación gem install sass mv style.css style.scss sass --watch style.scss:style.css viernes 27 de julio de 12

sintaxis SaSS vs. SCSS SaSS una sintaxis indentada similar a haml ya no tiene soporte SCSS bloques definidos en llaves idéntica a CSS ¡nos quedamos con scss! viernes 27 de julio de 12

nested rules #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } } Anidar selectores: #navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; } CSS SCSS viernes 27 de julio de 12

nested rules a { color: #ce4dd6; &:hover { color: #ffb3ff; } &:visited { color: #c458cb; } } Definir pseudoselectores con el operador ‘&’ de SaSS CSS SCSS a { color: #ce4dd6; } a:hover { color: #ffb3ff; } a:visited { color: #c458cb; } viernes 27 de julio de 12

variables :) SCSS $width: 960px; $margen: 12px; .wrapper { width: $width - $margen; margin: $margen * 2; padding: $margen; border-radius: $margen; } SCSS $color: #333; tr { color: $color - #111; } tr { color: darken($color, 25%); } viernes 27 de julio de 12

@import mi proyecto style.scss @import “reset”; @import “vars”; @import “mixins”; body { background-color: $bgcolor; color: $color; wrapper { width: $width; } } . .. _mixins.scss _reset.scss _vars.scss style.scss viernes 27 de julio de 12

mixins ! CSS SCSS .boton { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; behavior: url(radius.htc); /* ... */ } .widget { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; behavior: url(radius.htc); /* ... */ } @mixin borderRadius($radius) { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; behavior: url(radius.htc); } .boton { @include borderRadius(5px); } .widget { @include borderRadius(5px); } viernes 27 de julio de 12

extend !! SCSS SCSS .boton { @include border-radius(5px); } .guardar { @extend .boton; background-color: #369; } .borrar { @extend .boton; background-color: #a00; } viernes 27 de julio de 12

extend !! SCSS SCSS .boton { @include border-radius(5px); } .guardar { @extend .boton; background-color: #369; } .borrar { @extend .boton; background-color: #a00; } viernes 27 de julio de 12

functions !!!! :)_ SCSS $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } Sayonara,

y mucho más for @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } @each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } each while $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } viernes 27 de julio de 12

y más, y más Depuración y control de errores: @debug @warn formatos de salida: :nested :expanded :compact :compressed viernes 27 de julio de 12

Frameworks! Foundation 3 tiene una edición escrita en Sass + Compass http://foundation.zurb.com/docs/gem-install.php 320 and Up incluye varias opciones de preprocesado (LESS, SaSS, SaSS + Compass, ScSS, ScSS + Compass ...) http://stuffandnonsense.co.uk/projects/320andup/ Compass Basado en SaSS, se puede instalar como gem http://compass-style.org/ viernes 27 de julio de 12

Para saber más... Pragmatic guide to SaSS http://pragprog.com/book/pg_sass/pragmatic-guide-to-sass SaSS Reference http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html viernes 27 de julio de 12

muchas gracias Gotardo González 27 / 7 / 2012 viernes 27 de julio de 12