Sass - Directivas de importación

Descripción

Importar directivas, importa los archivos SASS o SCSS. Toma directamente el nombre del archivo para importar. Todos los archivos que se importan en SASS se combinarán en un solo archivo CSS. Hay algunas cosas que se compilan en un CSS cuando usamos la regla @import :

Extensión de archivo .css
El nombre del archivo comienza con http: //
El nombre del archivo es url ()
@import consta de cualquier consulta de medios.

Por ejemplo, cree un archivo SASS con el siguiente código:

@import "style.css";
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

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\style.scss:style.css

El código anterior se compilará en el archivo CSS como se muestra a continuación:

@import url(style.css);
@import "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

Las siguientes son las formas de importar archivos usando la regla @import :

Parciales

Los parciales son archivos SASS o SCSS, que se escriben con un guión bajo al principio del nombre (_partials.scss). El nombre de archivo parcial se puede importar en el archivo SASS sin usar el guión bajo. SASS no compila el archivo CSS. Al usar el guión bajo, hace que SASS entienda que es parcial y no debe generar el archivo CSS.

Anidado @import

La directiva @import se puede incluir dentro de las reglas @media y las reglas CSS. El archivo de nivel base importa el contenido del otro archivo importado. La regla de importación está anidada en el mismo lugar que el primer @import .

Por ejemplo, cree un archivo SASS con el siguiente código:

.container {
   background: #ffff;
}

Importe el archivo anterior al siguiente archivo SASS como se muestra a continuación:

h4 {
   @import "example";
}

El código anterior se compilará en el archivo CSS como se muestra a continuación:

h4 .container {
   background: #ffff;
}

Sintaxis

A continuación se muestra una sintaxis, utilizada para importar archivos, en el archivo SCSS:

@import 'stylesheet'

Ejemplo

El siguiente ejemplo demuestra el uso de @import en el archivo SCSS:

import.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using Import</h1>
      <h4>Import the files in SASS</h4>
      <ul>
         <li>Red</li>
         <li>Green</li>
      </ul>
   </body>
</html>

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

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

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

style.scss

@import "partial";
.container {
   background: #ffff;
}

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

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\style.scss:style.css

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

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

Salida

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

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

↰ Previous page