Mi nombre es Fernando Briano y soy programador.

Sass – hojas de estilo sintácticamente impresionantes

Sass - style with attitude

Sass – style with attitude

El paso siguiente a aprender HAML fue leer sobre Sass: Syntactically Awesome Stylesheets. ¿Qué es Sass? Para mí: CSS como debe ser:

Sass es una extensión de CSS3, agregando reglas anidadas, variables, mixins, herencia de selectores, y más.

Su sintaxis scss es un superconjunto (qué buena palabra) de CSS3 por lo que cualquier hoja de estilo CSS3 es una hoja de estilo válida scss. También soporta una sintaxis anterior basada en la simplicidad de HAML, usando la indentación para definir bloques.

Como HAML, al ver un poco de código nos damos cuenta de qué va la cosa. Este es el código que escribimos con Sass:

// Variables
$verde: #84c225;
$verde_o: #4A662F;
$verde_h: #AABF56;
 
a {
  color: $verde;
  text-decoration: none;
  // Referencias al padre
  &:hover { color: $verde_h; }
  &:visited { color: $verde_o; }
  &:visited { color: $verde_h; }
}
 
// Anidado
#header{
  width: 980px;
  position: relative;
  .logo{
    width: 235px;
    height: 80px;
    background: url(/wp-content/themes/picandocodigo-4.0/images/picandocodigo.png) no-repeat;
    margin: 20px;
    float: left;
  }
}
 
// Mixins
@mixin float_right($margin){
  float: right;
  margin: $margin;
}
 
.image_right{
  @include float_right(15px);
}
 
.text_right{
  @include float_right(10px);
}
 
//Este comentario no va a aparecer en el CSS
/* Este comentario va a aparecer en el CSS */

Como HAML, podemos usarlo separado desde línea de comando y crear el css a partir del archivo scss, o integrado en un framework web como Rails o Sinatra. Para “compilar” a css lo que escribimos arriba, ejecutamos:

[fernando@hoth]$ sass --watch test.scss

 

Y el archivo css generado se ve así:

a {
  color: #84c225;
  text-decoration: none; }
  a:hover {
    color: #aabf56; }
  a:visited {
    color: #4a662f; }
  a:visited {
    color: #aabf56; }
 
#header {
  width: 980px;
  position: relative; }
  #header .logo {
    width: 235px;
    height: 80px;
    background: url(/wp-content/themes/picandocodigo-4.0/images/picandocodigo.png) no-repeat;
    margin: 20px;
    float: left; }
 
.image_right {
  float: right;
  margin: 15px; }
 
.text_right {
  float: right;
  margin: 10px; }
 
/* Este comentario va a aparecer en el CSS */

Mi primeros pasos los dí tras aprender HAML migrando los CSS de mi sitio personal a Sass. Como pueden ver el application.css.scss no es un archivo muy grande. Noté las ventajas de migrar a este lenguaje, pero fue un trabajo bastante simple y creo que no llegué a aprovechar todas las ventajas de Scss.

Sin embargo, en estos días tuve que maquetar un sitio desde cero para Ruby On Rails, y arranqué usando HAML y Sass desde un principio. Gran casualidad que el cliente pidiera específicamente que usara estas dos tecnologías, una suerte que había estado aprendiendo sobre ellas 🙂 (nunca se está demasiado preparado para un trabajo). Ahí fue que descubrí las verdaderas ventajas de Scss.

No creo que pueda volver a escribir una hoja de estilo sin usar Sass. Facilita y dinamiza mucho el trabajo. Si vas a usar un valor más de una vez, creas una variable. Si el mismo formato se aplica a varios lugares distintos, creas un mixin. El anidado de propiedades permite tener un archivo mucho mas lógico (por lo menos del punto de vista de un programador) y ordenado. El hecho de poder separar los estilos en varios archivos y que Sass luego los una en un CSS solo, permite delegar y encapsular a granel sin sacrificar performance teniendo varios CSS que importar en nuestro sitio.

Sass aplica prácticas de la programación como encapsulación y DRY (no te repitas), y resulta muy ágil. Si tuviera un sello de “recomendado por picandocodigo”, Sass lo gana. Les recomiendo darse una vuelta por el tutorial y sigan con la documentación de referencia. Y empiecen a escribir sus hojas de estilo de manera impresionante con Sass.

Feed de comentarios | Url para Trackbacks | Suscribirse a los posts por correo electrónico

10 comentarios en este post

  1. Avatar Alejandro 10 enero. 2012 - 9:37 am Google Chrome 16.0.912.63 GNU/Linux 64 bits

    Buen post, definitivamente necesito días de 48 horas para aprender todo lo que me parece interesante… y me parecen interesantes muchas cosas del mundo de la programación y el desarrollo web…

    • Avatar Fernando 10 enero. 2012 - 10:10 am Opera 9.80 Unknown O.S.

      Me siento igual respecto a las horas del día, no hay tiempo suficiente para estudiar todas las cosas interesantes que nos ofrece el mundillo de la programación.

      En cuanto a Sass, piensa que el tiempo invertido en aprender a usarlo será compensado cuando empieces a trabajar con Sass y vayas mas rápido en el desarrollo de tu sitios web 🙂

      ¡Saludos!

  2. Avatar Alejandro 10 enero. 2012 - 11:01 am Google Chrome 16.0.912.63 GNU/Linux 64 bits

    :-), me guardo el enlace para revisarlo en cuanto tenga un hueco.

    Un saludo

  3. Avatar dklight 19 enero. 2012 - 12:04 am Google Chrome 14.0.835.202 GNU/Linux

    Definitivamente espero ese sello (png) de “recomendado por picandocodigo”. Tengo que escribir css nuevo (template completo) para mi blog. Así que cuando logre separar tiempo para dedicarle a eso, definitivamente sass es algo qeu voy a probar, porque siempre me complicaron la vida los css.

    Tenés idea de si hay algún tipo de ingeniería inversa para migrar css a sass?

    • Avatar Fernando 19 enero. 2012 - 3:49 pm Firefox 9.0.1 Ubuntu 64 bits

      Ya me pongo en contacto con el departamento de diseño gráfico de Picando Código para tirar ideas para el sello de calidad, jeje.

      A raíz de tu comentario encontré que al instalar Sass, se incluye una aplicación de línea de comando: sass-convert. Sirve para convertir entre archivos sass, scss y css. Se puede convertir de CSS a SCSS agregando los anidados que correspondan.

      Totalmente recomendable aprender Sass. ¡Es Css para programadores! Y eso que todavía no probé Less que me lo vienen recomendando mucho también.

  4. Avatar Diego Varese 6 febrero. 2012 - 8:14 pm Google Chrome 16.0.912.77 Mac OS

    Yo te diría que dejes Sass y aprendas Less, es a lo que se está moviendo la comunidad en general. Sass es demasiado diferente a CSS, Less es CSS con extensiones y cada vez está siendo más integrado a toolkits y proyectos, por ejemplo el Twitter Bootstrap

    http://twitter.github.com/bootstrap/

    • Avatar Fernando 6 febrero. 2012 - 10:07 pm Firefox 10.0 GNU/Linux 64 bits

      Lo tengo pendiente de estudiar. Pero Sass no es muy diferente a CSS, igual que Less, es CSS con extensiones. Es más, mirando por arriba la documentación de Less, Sass y Less son muy similares en muchas cosas. También hay versiones Sass de Bootstrap 🙂

  5. Avatar Emili 24 mayo. 2012 - 7:14 am Google Chrome 19.0.1084.52 Mac OS

    Buenos dias estoy haciendo mi portafolios en http://www.porsilasmoscasweb.com/beta y al ver esto de less i sass me a picado el gusanito.

    No tengo demaciados conocimientos de programacion por lo que me gustaria saber donde puendo encontrar documentacion i ejemplos en español. Para aprender y poder aplicar algo de este codigo para ir provado

    • Avatar Fernando 25 mayo. 2012 - 1:50 pm Firefox 14.0a2 GNU/Linux

      Buenas, espero que este post te de una mano como para empezar. No sabría decirte dónde encontrar más documentación en español, mas de lo que te pueda decir una búsqueda rápida en tu motor de búsqueda favorito.

      ¡Suerte con la búsqueda!
      Saludos

  6. Avatar Diego 28 mayo. 2014 - 1:31 am Google Chrome 35.0.1916.114 Windows 7

    Donde se puede encontrar buen material de sass , es espectacular como se redacta el codigo

    Dejar un comentario

    Toasty!