Sass: Potenciando tu CSS

Por Diego Chiapa

A la hora de escribir estilos CSS, hay muchas veces que tenemos que repetir el código, o repetir los selectores para que tomen el mismo código, pero eso se acabo con SASS.

SASS es un pre procesador de CSS, es decir que tiene sintaxis parecida a CSS, pero lo que nosotros escribamos en SASS debemos compilarlo, es decir transformarlo, en CSS. Es decir que si al final de cuentas estaremos creando CSS, pero de manera mas rápida.

Variables

En SASS, podemos utilizar variables de una manera mas sencilla:

$Color: #323232;

Luego llamamos a la variable con la siguiente sintaxis:

.texto{
  color: $Color;
}

En CSS se ve asi:

.texto{
  color: #323232;
}

Anidado

Se pueden anidar estilos, en lugar de escribir selectores descendente:

.padre{
  border: 4px solid rgba(0,0,0, 0.1);
  border-left-color: #467acf;
  border-radius: 50%;
  height: 36px;
  width:36px; 
  .hijo1{
    height: 20px;
    width: 20px; 
  }
  .hijo2{
  height: 25px;
  width: 25px; 
  }
}

En CSS se ve de esta manera:

.padre{
  border: 4px solid rgba(0,0,0, 0.1);
  border-left-color: #467acf;
  border-radius: 50%;
  height: 30px;
  width:30px;
}
.padre .hijo1{
  height: 20px;
  width: 20px;
}
.padre .hijo2{
  height: 25px;
  width: 25px; 
}

Mixins

Reutilizamos código con mixins. Creamos el mixin con @mixin:

@mixin content($bgColor) {
  background-color: $bgColor;
  border-radius: 10px;
  box-shadow: 0 0 7px 0 $dark-grey;
  margin: 2em 0;
  padding: 1em 1rem;
}

Luego lo aplicamos con @include:

.aboutIntro {
  @include content($grey);
  &__imagePpal {
    max-width: 350px;
    width: 70%;
    @media screen and (min-width: 576px) {
      width: 50%;
    }
  }
}

Asi en CSS tendremos:

.aboutIntro {
  background-color: #ebebeb;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 7px 0 #323232;
  box-shadow: 0 0 7px 0 #323232;
  margin: 2em 0;
  padding: 1em 1rem;
}