Usando SCSS/SASS - Mixins & extend

Continuando con el uso de SCSS/SASS y lo aprendido en el primero post y en el segundo post.

Otra capacidad que nos permite SASS/SCSS son los archivos parciales, lo que te permite importar diferentes archivos dentro de otros, para producir un solo archivos CSS que incluye todos los contenidos de los archivos. Por ejemplo si tenemos un archivo llamada _reset.scss, lo podemos incluir en otro archivo usando la siguiente instrucción.

@import 'reset';

La funcionalidad anterior nos permite importar archivos completos, pero de una forma muy similar podemos importar pedazos de código, unos llamados Mixins y otros Extends.

Mixins nos permite incluir parámetros para obtener un resultado diferente con el mismo código, por ejemplo:

@mixin box($radius, $color, $fsize) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
  border-color: $color;
  font-size: $fsize;
  line-height: $fsize;
  padding: 10px;
}

.box { 
  @include box(10px, #CCC, 12px); 
}

//Resultado

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  border-color: #CCCCCC;
  font-size: 12px;
  line-height: 12px;
  padding: 10px;
}

Los mixins pueden o no tener varios paramentos, mientras que un extend no necesita paramentos ya que su funcionalidad es reutilizar código que nunca cambiara a través de nuestro sitio y así evitar el escribir el mismo código una y otra ves, así como facilitar su futura modificación. Por ejemplo:

@extend %boton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  font-size: 12px;
  padding: 5px 15px;
  background-color: #CCC;
  cursor: pointer;
  color: #000;
  &:hover{
    background-color: #FFF;
    text-decoration: underline;
  }
}

.boton {
@extend %boton;
}

//Resultado
.boton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  font-size: 12px;
  padding: 5px 15px;
  background-color: #CCC;
  cursor: pointer;
  color: #000;
}
.boton:hover {
  background-color: #FFF;
  text-decoration: underline;
}

 

NOTA: el símbolo ”&” en SASS/SCSS indica que se utilizara el selector padre, en el caso del ejemplo anterior se utiliza el selector padre “.boton” mas el evento “:hover” de esta forma sin saber cual es la clase o ID o selector que se vaya a usar podemos hacer uso de el mismo.

Todo lo anterior es una guía totalmente básica de lo que se puede hacer y como funciona SASS/SCSS estas funcionalidades asi como muchas otras mas se pueden encontrar en el sitio lenguaje: http://sass-lang.com/