Sass - Incluyendo un Mixin

Descripción

La directiva @include se usa para incluir el mixin en el documento. Se toma el nombre de mixin y se le pasan argumentos opcionales. Los estilos definidos por el mixin se pueden incluir en la regla actual.

Ejemplo

El siguiente ejemplo demuestra el uso de incluir un mixin en el archivo SCSS:

sample.htm

<html>
   <head>
      <title> Mixin example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "sample.css"/>
   </head>
   
   <body>
      <div class = "cont">
         <h2>Example using include</h2>
         <h3>Different Colors</h3>
         <ul>
            <li>Red</li>
            <li>Green</li>
            <li>Blue</li>
         </ul>
      </div>
   </body>
</html>

A continuación, cree el archivo sample.scss .

sample.scss

@mixin style {
   .cont{
      background-color: #77C1EF;
      color: #ffffff;
   }

   h3 {
      color: #ffffff;
   }
}
@include style;

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

sass --watch C:\ruby\lib\sass\sample.scss:sample.css

A continuación, ejecute el comando anterior; creará el archivo sample.css automáticamente con el siguiente código:

sample.css

.cont {
   background-color: #77C1EF;
   color: #ffffff;
}

h3 {
   color: #ffffff;
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en sample.htm archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page