Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

¿Qué es SASS?

¿Qué es SASS? 11.NOV.15

Alvaro José Rios Ch
Fundador WebBizarro

Hace un tiempo publiqué un articulo con algunos snipets de CSS y muchos se molestaron porque era CSS y hay mejores formas y la verdad no veo la razón, muchas personas que conozco tienen que usar CSS y no por que sea la mejor opción sino por razones técnicas, como mantenimiento, restricciones en la empresas y mucho más por lo que tienen que hacer las cosas con VanillaCSS, sin embargo no es de lo que vamos a hablar hoy.

Hoy nos toca hablas de SASS y dudo mucho que alguien no haya escuchado al menos hablar de este famoso pre-procesador de CSS que es una referencia en este campo, junto a LESS y Stylus. Un preprocesador se trata de una herramienta que nos permite crear hojas de estilo con un lenguaje que luego es compilado a CSS y que nos facilita mucho la vida.

SASS es un preprocesador escrito en ruby por lo que es muy famoso en proyectos de Ruby on rails pero que podemos usar para cualquier proyecto y que nos ofrece la ventaja de poder usar variables, importar hojas de estilo, escribir partials, anidar reglas y mucho más.

No vamos a entrar en detalles de instalación y sintaxis porque eso lo pueden consultar en la documentación y ustedes son todos unos profesionales que leen la documentación antes de usar cualquier herramienta nueva así que no les voy a negar la experiencia.

En cuanto a la sintaxis podemos decir que tenemos dos tipos.

SCSS, usa la extensión .sccs y la ventaja es que prácticamente escribir css normal pero con todas las ventajas de SASS.

SASS, o lenguaje identado que usa la extensión .sass que es mucho más simple de escribir y más ordenado, no son necesarias las llaves o los punto y coma por lo que es más rápido a la hora de escribir.

Sin importar cual de las dos sintaxis escojas puedes usar todas las ventajas de la herramienta e incluso puedes convertir de un formato a otro con la herramienta sass-convert.

 

Variables

Este es un punto super importante, de la misma forma en que cuando programamos colocamos cada constante en un archivo para poder modificarla en caso de que algo cambie, lo mismo hacemos con SASS ya que podemos definir todos los colores en una hoja y si queremos cambiar algún color después de escribir mucho código no tendremos que cambiarlo en cada lugar sino en la variable.

$font-stack:Helvetica,sans-serif;

$primary-color:#333;

body{

font: 100% $font-stack;
color: $primary-color;

}

Anidar

Esta es una característica muy interesante ya que podemos agrupar los estilos en componentes y asegurarnos de que sea mucho más fácil de leer, a diferencia del CSS donde los estilos anidados son una pesadilla. Sin embargo esto es algo que debemos manejar con cuidado y no abusar de los estilos anidados más de tres estilos anidados puede causar problemas a futuro.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

El resultado al compilar sería este.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Como ven es mucho más fácil leer la primera opción que la alternativa en VanillaCSS.

 

Parciales (Partials)

Esto es lo mejor del mundo ya que nos permite tener pequeñas piezas de código que podemos importar dentro de otros módulos, lo bueno de esto es que podemos tener todo el código separado en módulos, por ejemplo si tenemos el código de un botón podemos ponerlo en un parcial e importarlo cada vez que lo necesitemos.

Para usar los partials empleamos el import que simplemente nos permite incluir una pieza de código dentro de otra.

 

Mixins

Los mixins se pueden ver como funciones que podemos llamar con parámetros y nos evitan repetir código o nos facilita la vida por ejemplo podemos podemos usar un mixin para evitar escribir código con prefijos.

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;

}

.box { 
    @include border-radius(10px); 
}

Herencia

Esto es una característica genial que nos permite que un estilo herede de otro, la idea es simple con esto no tenemos que repetir código y eso hace el trabajo más rápido y fácil de mantener.

 

Operadores

Esto se usa para hacer cálculos complejos y operaciones matemáticas como sumas, restas, multiplicaciones y divisiones. Estos operadores combinados con las funciones pueden darle mucho poder a tu código.

 

Conclusión

Para finalizar déjenme decir que la mayoría de los preprocesadores tienen estas características, las ventajas de esta herramienta es que podemos encontrar muchos Minix en internet que nos ayudan mucho, incluso librerías como boostrap nos permiten descargar el código en SASS.