@include vs @extend en SASS

La palabra clave @include se usa para incluir el código escrito en un bloque mixin. @mixin se usa para agrupar el código css que debe reutilizarse varias veces. Mientras que @extend se usa en SASS para heredar (compartir) las propiedades de otro selector css. @extend es más útil cuando los elementos son casi iguales o idénticos.
La principal diferencia entre los dos está en su archivo CSS compilado.

  • @incluir archivo SCSS de ejemplo :

    @mixin text {
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    .hello{
      @include text; 
    }
    .world{
      @include text;
    }

    Mixin duplica los estilos sobre todas las clases en el CSS.
    Compila el archivo CSS:

    .hello{
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    .world{
      color: black;
      font-size: 30px;
      font-weight: bold;
    }
    

    Mixin también puede aceptar parámetros si es necesario, mientras que esto no es posible con extender.
    para más detalles de @mixin visita aquí

  • Ejemplo de @extend:
    aquí, en este ejemplo, los dos botones compartirán las propiedades generales de un botón, pero difieren solo en el color de fondo, por lo que usar extender en casos como estos, donde los elementos son casi iguales y solo difieren algunas propiedades usando @extend es una buena idea.
    Archivo SCSS:

    %button-format {
        padding: 10px 20px;
        border-radius: 15px;
        color: black;
    }
      
    .toolbar-button {
        @extend %button-format;
        background-color: lightpink;
      
        &:hover {
            background-color: rgb(155, 106, 114);
        }
    }
      
    .status-bar-button {
        @extend %button-format;
        background-color: lightblue;
      
        &:hover {
            background-color: blue;
        }
    }

    archivo CSS compilado:

    .status-bar-button, .toolbar-button {
      padding: 10px 20px;
      border-radius: 15px;
      color: black;
    }
    
    .toolbar-button {
      background-color: lightpink;
    }
    .toolbar-button:hover {
      background-color: #9b6a72;
    }
    
    .status-bar-button {
      background-color: lightblue;
    }
    .status-bar-button:hover {
      background-color: blue;
    }
    

Conclusión:
SASS es un fantástico lenguaje de hojas de estilo y sus dos características, @include y @extend, tienen pros y contras a pesar de esto, si se usan en la situación exacta, pueden resultar las mejores herramientas de SASS.

Publicación traducida automáticamente

Artículo escrito por shirshak y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *