SASS | @mixin y @include

Los mixins se pueden usar para agrupar estilos a los que se les pueden asignar diferentes valores y se pueden usar varias veces como función. También podemos pasar argumentos en mixin como función, lo que nos permite escribir código reutilizable.

Los mixins se definen usando @mixin at-rule y se pueden usar en el contexto actual usando @include at-rule.

Los mixins se pueden usar de dos maneras: sin argumentos y con argumentos.

1. Sin Argumentos: Este tipo de mixin se puede usar cuando no necesitamos cambiar los valores de las propiedades, es decir, queremos usar un grupo de propiedades una y otra vez con los mismos valores de propiedades.

   Sintaxis:

   • Para definir mixin: @mixin nombre_de_mixin {…}
   • Para usar mixin en el bloque actual: @include name_of_mixin; .

   @mixin block-name{
       property-1: value;
       property-2: value;
           ...
       property-n: value;
   }
   
   block-name2{
       @include block-name;
   }
           

   Archivo SCSS:

   @mixin first-mixin {
       width: 100%;
       overflow: hidden;
       color: gray;
   }
               
   @mixin second-mixin {
       @include first-mixin;
               
       ul {
           list-style-type: none;
       }
               
       li {
           display: inline-block;
           width: 100px;
           padding: 5px 10px;
       }
               
       li a {
           text-decoration: none;
       }
               
   }
               
   navigationbar {
       @include second-mixin;
   }
           

   Archivo CSS compilado:

   navigationbar {
       width: 100%;
       overflow: hidden;
       color: gray;
   }
   
   navigationbar ul {
       list-style-type: none;
   }
   
   navigationbar li {
       display: inline-block;
       width: 100px;
       padding: 5px 10px;
   }
   
   navigationbar li a {
       text-decoration: none;
   }
                 
           

2. Con Argumentos: Este tipo de mixin se puede usar, cuando queremos usar un grupo de propiedades una y otra vez con los diferentes valores y podemos pasar los diferentes valores usando argumentos como función. Aquí, el concepto del valor predeterminado del argumento es el mismo que cualquier otro lenguaje de programación.

   Sintaxis:

   • Para definir mixin: @mixin nombre_de_mixin (argumentos…) {…}
   • Para usar mixin en el bloque actual: @include name_of_mixin (argumentos…);

   // Here default values are optional
   
   @mixin block-name($parameter1, $parameter2: default, ...) {
                   
       property-1: $parameter1;
       property-2: $parameter2;
       // You can use all the parameters 
       // same as variables
   }
   
   block-name2 {
       @include block-name($argument1, $argument2, ...);
   }
           

   Archivo SASS:

    // Here blue is default value of $three
   
   @mixin first-mixin($one, $two, $three: blue) {
       width: $one;
       overflow: $two;
       color: $three;
   }
   
   @mixin second-mixin($one, $two, $three, $four) {
       // Don't need to pass the third argument if 
           // the default value is same as your argument.
       @include first-mixin($one, $two /*, Default*/);
   
       ul {
           list-style-type: none;
       }
   
       li {
           display: inline-block;
           width: $four;
           padding: 5px 10px;
       }
   
       li a {
           text-decoration: none;
       }
   
   }
   
   navigationbar {
       @include second-mixin(100%, hidden, blue, 100px);
   }
           

   Archivo CSS compilado:

   navigationbar {
     width: 100%;
     overflow: hidden;
     color: blue;
   }
   
   navigationbar ul {
     list-style-type: none;
   }
   
   navigationbar li {
     display: inline-block;
     width: 100px;
     padding: 5px 10px;
   }
   
   navigationbar li a {
     text-decoration: none;
   }