@mixin e @include em sass | Explicado

SINTACTICALMENTE AMPRESSIONATIVA SHOTHEET (SASS) é popular para facilitar seus usuários a escrever o código CSS seco (não se repita), que é limpo, mais legível e reutilizável. Dessa forma, Sass aumenta a potencialidade da linguagem básica CSS. Uma maneira de escrever um código CSS reutilizável usando SASS é através da criação de um mixin por @mixin regra e incluindo este mixin usando a regra @include. Para saber mais sobre essas regras, siga o artigo abaixo.

Regras Sass @mixin e @include

A regra @Mixin em Sass permite criar um código CSS reutilizável. Este código reutilizável consiste em estilos redundantes, portanto, estes são agrupados para que eles possam ser usados ​​em qualquer lugar do código onde necessário. Este pedaço de código é chamado de mixin. Com o objetivo de usar um mixin em seu código, Sass fornece a regra @include.

Aqui vamos guiá -lo sobre como criar e usar um mixin.

Como definir uma mistura

Com o objetivo de definir um mixin, use a diretiva @mixin e agrupe seus estilos CSS redundantes e reutilizáveis ​​juntos.

Sintaxe da regra @mixin

@mixin mixin-name
valor da propriedade;
valor da propriedade;

Depois de usar a diretiva @mixin, você deve nomear esse mixin em particular e depois escrever propriedades CSS nesse bloco e um mixin será criado com sucesso. Aqui está um exemplo de mixin.

@Mixin Header
Background-Color: verde;
tamanho da fonte: 30px;
intensidade da fonte: Negrito;

Voila, um mixin para um cabeçalho foi criado! Agora, toda vez que você precisa estilizar seu cabeçalho, você não precisa escrever essas propriedades, repetidamente, basta usar o mixin acima e você está pronto para ir. Mas como usar este mixin? Bem, como mencionado acima usando a regra @include, um mixin pode ser usado.

Sintaxe da regra @include

seletor
@include mixin-name;

Dessa forma, você pode incluir um mixin no seu código sempre que necessário. Por exemplo, vamos incluir o mixin de cabeçalho que criamos acima.

.cabeçalho
@include cabeçalho;

Quando o arquivo SASS for transpilado, o código acima fornecerá o seguinte arquivo de saída CSS resultante.

.cabeçalho
Background-Color: verde;
tamanho da fonte: 30px;
intensidade da fonte: Negrito;

Outra vantagem dessa regra @include é que você pode incluir vários mixins juntos. Por exemplo, abaixo, incluímos três mixins em outro mixin.

@mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

Dessa forma, você pode usar vários mixins juntos.

Até agora, aprendemos sobre mixins sem passar argumentos. Na próxima seção, veremos como você pode passar argumentos para um mixin.

Como passar argumentos para um mixin

A aprovação de argumentos para Mixin é útil quando você deseja agrupar um conjunto semelhante de propriedades CSS, no entanto, os valores passados ​​para essas propriedades podem diferir. Aqui está como você pode definir um mixin passando um argumento.

@Mixin Border ($ color, $ width)
Fronteira: $ largura pontilhada $ color;

.contêiner
@include borda (rosa, 2px);

.caixa
@include borda (roxo, 3px);

No trecho de código acima, criamos um mixin pelo nome Border e passamos por dois argumentos. Ao usar esse mixin enquanto estilizando outros elementos, usamos a regra @include, enquanto isso, os valores passados ​​para o mix de fronteira diferem em cada caso. Aqui os argumentos passados ​​são definidos como variáveis.

Outra coisa que você pode fazer com o Mixins é que você pode atribuir valores padrão aos argumentos passados ​​para os Mixins.

@Mixin Border ($ Width: 2px, $ color: rosa)
Fronteira: $ largura pontilhada $ color;

Se você deseja manter os valores padrão, depende de você, no entanto, se você deseja alterar um valor específico, aqui está como será feito.

.recipiente
@include borda ($ width: 3px);

A cor aplicada à borda do seletor será a mesma definida no valor padrão.

Conclusão

A regra @Mixin em Sass permite criar um código CSS reutilizável chamado A Mixin, no qual você pode agrupar propriedades e valores redundantes do CSS que podem ser usados ​​em qualquer lugar do seu código quando necessário. Enquanto isso, a regra @include é usada para adicionar um mixin em seu código. Você também pode transmitir argumentos para um mixin quando deseja agrupar um conjunto semelhante de propriedades CSS juntas com valores diferentes. Isso e muito mais sobre a regra @mixin e @include foi compilado neste artigo para você.