Introducción a SaSS

Transcript

1. gotardo gonzález Sintactically Awsome Stylesheets una introducción rápida a viernes 27 de julio de 12
2. ¿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
3. 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
4. instalación gem install sass mv style.css style.scss sass --watch style.scss:style.css viernes 27 de julio de 12
5. 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
6. 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
7. 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
8. 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
9. @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
10. 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
11. 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
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
13. 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, <div class=”grid-5”> viernes 27 de julio de 12
14. 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
15. 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
16. 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
17. 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
18. muchas gracias Gotardo González 27 / 7 / 2012 viernes 27 de julio de 12