Introducción a SaSS

Transcript

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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,
    viernes 27 de julio de 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide