Sass - Diretivas de importação

Descrição

Importa diretivas, importa os arquivos SASS ou SCSS. Leva diretamente o nome do arquivo para importar. Todos os arquivos importados no SASS serão combinados em um único arquivo CSS. Existem algumas coisas que são compiladas para um CSS quando usamos a regra @import -

Extensão de arquivo .css
O nome do arquivo começa com http: //
O nome do arquivo é url ()
@import consiste em quaisquer consultas de mídia.

Por exemplo, crie um arquivo SASS com o seguinte código -

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

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

O código acima será compilado para o arquivo CSS conforme mostrado abaixo -

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

A seguir estão as maneiras de importar arquivos usando a regra @import -

Parciais

Parciais são arquivos SASS ou SCSS, que são gravados com sublinhado no início do nome (_partials.scss). O nome do arquivo parcial pode ser importado no arquivo SASS sem usar o sublinhado. O SASS não compila o arquivo CSS. Ao usar o sublinhado, faz com que o SASS entenda que é parcial e não deve gerar o arquivo CSS.

Nested @import

A diretiva @import pode ser incluída dentro das regras @media e regras CSS. O arquivo de nível básico importa o conteúdo do outro arquivo importado. A regra de importação está aninhada no mesmo lugar que o primeiro @import .

Por exemplo, crie um arquivo SASS com o seguinte código -

.container {
   background: #ffff;
}

Importe o arquivo acima para o seguinte arquivo SASS conforme mostrado abaixo -

h4 {
   @import "example";
}

O código acima será compilado para o arquivo CSS conforme mostrado abaixo -

h4 .container {
   background: #ffff;
}

Sintaxe

Dada a seguir é uma sintaxe, usada para importar arquivos, no arquivo SCSS -

@import 'stylesheet'

Exemplo

O exemplo a seguir demonstra o uso de @import no arquivo 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>

Em seguida, crie o arquivo _partial.scss .

_partial.scss

ul{
   margin: 0;
   padding: 1;
}

li{
   color: #680000;
}

Em seguida, crie o arquivo style.scss .

style.scss

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

h1 {
   color: #77C1EF;
}

h4 {
   color: #B98D25;
}

Você pode dizer ao SASS para observar o arquivo e atualizar o CSS sempre que o arquivo SASS for alterado, usando o seguinte comando -

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

A seguir, execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

ul {
  margin: 0;
  padding: 1; }

li {
  color: #680000; }

.container {
  background: #ffff; }

h1 {
  color: #77C1EF; }

h4 {
  color: #B98D25; }

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima em import.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.

↰ Previous page