Sass – hojas de estilo sintácticamente impresionantes
Publicado el 10 de enero de 2012
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.
Alejandro 10 enero. 2012 - 09:37
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…
Fernando 10 enero. 2012 - 10:10
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!
Alejandro 10 enero. 2012 - 11:01
:-), me guardo el enlace para revisarlo en cuanto tenga un hueco.
Un saludo
dklight 19 enero. 2012 - 00:04
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?
Fernando 19 enero. 2012 - 15:49
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.
Diego Varese 6 febrero. 2012 - 20:14
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/
Fernando 6 febrero. 2012 - 22:07
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 🙂
Emili 24 mayo. 2012 - 07:14
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
Fernando 25 mayo. 2012 - 13:50
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
Diego 28 mayo. 2014 - 01:31
Donde se puede encontrar buen material de sass , es espectacular como se redacta el codigo