Tuesday, February 19, 2013

Rails: Sass


Sass (Syntactically Awesome Stylesheets), es un meta-lenguaje que proporciona una sintaxis más simple y elegante para escribir CSS e implementa varias características útiles para la creación de hojas de estilo manejables.

Características


  1. Anidación. (seguir la filosofía DRY)
     .container{
          width: 200px;
     }
     .container .sms{
               border: 1px solid red;
     }
     .container .sms .title{
               color: red;
     }
     .container .section{
              margin-left:5px;
     }
     .container .section .title{
              color: #0000000;
    }
    
    .container{
        width: 200px;
        .sms {
              border: 1px solid red;
              .title { color: red;}
        }
       .section{
              margin-left:5px;
              .title{ color: #0000000;}
      }
  2. Variables. Las variables se declaran con el símbolo "$" y son muy útiles para declarar valores comunes en archivos CSS que son usadas en muchas partes del código. Podemos utilizar variables para representar los colores, tamaños, porcentajes...
    .content-navigation {
      border-color: #3bbfce;
      color: #2b9eab;
    }
    
    .border {
      padding: 8px;
      margin: 8px;
      border-color: #3bbfce;
    }
    
    $blue: #3bbfce;
    $margin: 8px;
    
    .content-navigation {
      border-color: $blue;
      color:
        darken($blue, 9%);
    }
    
    .border {
      padding: $margin;
      margin: $margin;
      border-color: $blue;
    }
    
    
  3.  Mixins. Un mixin es un fragmento de Sass que puede aplicarse fácilmente a otro selector, digamos que son como funciones. Para definir un mixin, todo lo que necesitas para escribir es @mixin, seguido por el nombre de la mixin y su estilo. uando se desea utilizar el mixin, sólo es llamarlo con la etiqueta @include.
    border-radius: 5px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    
        @mixin rounded-corners {  
          border-radius: 5px;  
          -moz-border-radius: 5px;  
          -webkit-border-radius: 5px;  
        }  
         .content {  
          color: #FFF;  
          padding: 5px 12px;  
          margin: 10px 0;  
          font-size: 16px;  
          @include rounded-corners;  
        }  
    
  4. Herencia. Sass puede decir a un selector que herede todos los estilos de otro sin duplicar las propiedades CSS.
  5.  
    .error, .formError {
      border: 1px #f00;
      background: #fdd;
    }
    
    .formError {
      border-width: 3px;
    }
    
     
    .error {
      border: 1px #f00;
      background: #fdd;
    }
    
    .formError {
      @extend .error;
      border-width: 3px;
    }
    



    2 comments:

    1. Lo que no me gusta de estas cosas es que tienes que correr el intérprete continuamente, aunque sea "desatendido" mediante un watcher.

      Me encantaría que fuese el navegador el que directamente implementase estas características.

      ¿Has probado less? es parecido pero es javascript quien reemplaza, y también tiene watchers!

      ReplyDelete
    2. No lo conocía pero lo probaré! muchas gracias tanto por tu opinión como por el consejo. Espero que el blog os sea de ayuda.




      ReplyDelete