Primeros pasos con SASS


Muy buenas a todos,

Ya se ha pasado el verano, y ya se han acabado las vacaciones, así que toca ponerse de nuevo manos a la obra. Durante este verano he dado un respiro al blog, que me ha ocupado bastante tiempo durante el año, mantenerlo y potenciarlo requiere un esfuerzo importante, así que tocaba descanso. Pero ya se ha terminado, a partir de ahora, iré recuperando el ritmo del blog, compartiendo con todo el mundo los conocimientos que voy adquiriendo e incluyendo en mi día a día.

Para empezar quiero compartir con vosotros mis primeros pasos con una herramienta que nos permite optimizar y mejorar el entendimiento y el trabajo con nuestras hojas de estilo, y no es otra cosa que SASS. Lo que hoy os quiero contar, a parte de hacer una breve introducción a SASS para aquellos que no lo conocen, son algunas de las características que podemos usar en nuestras hojas de estilo, y que a mi en concreto, al venir de un perfil más de programador, me ha ayudado a tratar las hojas de estilo de una forma más familiar, haciendo uso de variables, bucles, funciones, etc. Como veremos más adelante.

Os pongo el primer lugar el enlace de la página oficial de SASS, donde podréis encontrar toda la documentación sobre esta extensión de CSS.

http://sass-lang.com/

En la misma página podéis encontrar la siguiente definición sobre SASS que reproduzco a continuación para aclarar, para aquellos que no lo sepan, lo que es SASS exactamente.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly

Sass es una extensión de CSS que añade poder y elegancia al lenguaje básico. Nos permite utilizar variables, reglas anidadas, mixins, importaciones y más, todo ello completamente compatible con la sintaxis CSS. SASS ayuda a mantener grandes hojas de estilo bien organizadas y poner en marcha pequeñas hojas de estilo rápidamente.

Hoy os quiero enseñar algunas de las funcionalidades que incluye esta extensión de CSS y cómo podemos utilizarlas y para qué las he usado yo concretamente, motivos por los cuales me ha resultado muy interesante conocer y utilizar SASS en mis proyectos.

Variables

Con Sass podemos definir variables que después podremos utilizar como valores de las propiedades en nuestro CSS. Definiremos y utilizaremos una variables de la siguiente forma:

$color: red;

.box{
    color:$color;
}

Para cualquier programador, es inevitable, comprender las ventajas de usar variables en el CSS, nos permite modificar un valor que se repite en muchas clases de nuestro CSS con único cambio.

Reglas anidadas

Otra de las características que nos hacen el código CSS más entendible por medio de SASS, es la forma en que nos permite anidar las clases y las definiciones de elementos CSS. Esto asemeja el código mucho más a la estructura jerárquica que tiene HTML y por tanto más entendible. Vamos a ver la diferencia entre la forma tradicional de anidar clases en CSS y cómo podríamos hacerlo con SASS

/*CSS*/
ul li .example{
   /*propiedades CSS */
}

ul li a{
   /*propiedades CSS */
}

/*SASS*/
ul{
      
   li{
      .example{
          /*propiedades CSS*/
      }
      
      a{
          /*propiedades CSS
      }
   }
}

Mixins

Otro de los aspectos más útiles que incorpora SASS son los mixins. Desde un punto de vista práctico, los podemos definir como funciones que nos permiten agrupar propiedades CSS, además pueden incorporar parámetros para hacerlos más flexibles. Un mixin se define y se usa de la siguiente forma:

@mixin mixinexample() {
  /*Propiedades dentro del mixin*/
}

@mixin mixinexample2($ejemplo) {
  /*Propiedades dentro del mixin*/
  color:$ejemplo
}
.clase{
   @include mixinexample();
   @include mixinexample2(red);
}

Un ejemplo de un mixin que he creado recientemente en uno de mis proyectos, me sirve para colocar imágenes de background en mi CSS, hay una serie de propiedades que se repetían cada vez que quería colocar una imagen, y finalmente las agrupé en un mixin.

@mixin background-image($url,$repeater,$position,$size) {
  background-image:$url;
  background-repeat:$repeater;
  background-position:$position;
  background-size:$size;
}

Bucles

Otras de las características que nos ofrece SASS son los bucles. Como cualquier lenguaje de programación nos permite definir bucles de tipo @for, @each, @while. Os dejo un enlace donde se explican cómo usarlos.

http://thesassway.com/intermediate/if-for-each-while

Los bucles nos pueden servir para crear clases recursivas en las que las propiedades CSS son similares, vamos a ver un ejemplo.


$lista: $tipo1 $tipo2 $tipo3 $tipo4

@each $tipo in $list
{
    .#{$tipo}{
        background-image: url('/images/#{$tipo}.png');
        color:red;
    }
}

Este ejemplo nos creará una clase por cada tipo en la lista. Estas clases se crean con las propiedades comunes, pero cambia la imagen de fondo en función del tipo.

Más adelante, en otro post, os enseñaré algunos ejemplos de otras opciones que nos ofrece SASS, que también son muy interesantes, como la herencia, las clases ocultas, condicionales, etc.

Y esto es todo por hoy, espero, como siempre, que os haya resultado interesante. Aaaah! por cierto, se me había olvidado comentar que el soporte para SASS se puede añadir fácilmente en Visual Studio 2013 a través de la extensión Web Essentials, aquí os dejo un enlace donde os da toda la información relativa a esto http://www.mattburkedev.com/using-sass-with-visual-studio-2013-essentials/

Un saludo, hasta la próxima.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s