LESS - Passando conjuntos de regras para Mixins

Descrição

O conjunto de regras separado contém conjuntos de regras como propriedades, conjuntos de regras aninhados, declaração de variáveis, mixins, etc. Ele é armazenado em uma variável e incluído em outra estrutura; todas as propriedades do conjunto de regras são copiadas para essa estrutura.

Exemplo

O exemplo a seguir mostra como passar um conjunto de regras para mixin no arquivo LESS -

pass_ruleset.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

Em seguida, crie o arquivo style.less .

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

Você pode compilar o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Execute o comando acima; ele criará o arquivo style.css automaticamente com o seguinte código -

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

Resultado

Siga estas etapas para ver como o código acima funciona -

  • Salve o código html acima no passing_ruleset.htm Arquivo.

  • Abra este arquivo HTML em um navegador, a seguinte saída será exibida.

Escopo

Todas as variáveis ​​e mixins no conjunto de regras separado estão disponíveis onde quer que o conjunto de regras seja chamado ou definido. Caso contrário, tanto o chamador quanto os escopos de definição estão disponíveis por padrão. O escopo da declaração tem prioridade quando ambos os escopos contêm o mesmo mixin ou variável. O corpo do conjunto de regras separado é definido no escopo da declaração. Ele não altera seu escopo depois que o conjunto de regras desanexado é copiado de uma variável para outra.

A tabela a seguir lista todos os tipos de escopo -

Sr. Não. Tipos e descrição
1 Definição e visibilidade do escopo do chamador

Variáveis ​​e mixins são definidos dentro do conjunto de regras separado.
2 A referência não modificará o escopo do conjunto de regras desvinculado

Apenas fornecendo as referências, o conjunto de regras não acessa nenhum escopo novo.
3 O desbloqueio modificará o escopo do conjunto de regras desvinculado

O conjunto de regras desanexado pode acessar o escopo sendo importado para ele.