Sass @mixin e @include

Sass Mixin

@mixin 指令可让您创建可在整个网站中重复使用的 CSS 代码。

创建 @include 指令是为了让您使用（引用）mixin。

定义 Mixin

mixin 是用 @mixin 指令定义的。

Sass @mixin 语法：

@mixin name {
  property: value;
  property: value;
  ...
}

O exemplo a seguir cria um mixin chamado "important-text":

Sintaxe SCSS:

@mixin important-text {
  color: vermelho;
  font-size: 25px;
  font-weight: negrito;
  border: 1px sólido azul;
}

Dica:

Dicas sobre hífen e sublinhado no Sass: o hífen e o sublinhado são considerados iguais.

isto significa @mixin important-text { } e @mixin important_text { } é considerado o mesmo mixin!

Usar Mixin

@include A instrução é usada para referenciar mixin.

Sintaxe do Sass @include mixin:

selector {
  @include mixin-name;
}

Portanto, para incluir o mixin important-text criado acima:

Sintaxe SCSS:

.danger {
  @include important-text;
  background-color: verde;
}

O tradutor Sass convertirá o código acima para CSS comum:

Saída do CSS:

.danger {
  color: vermelho;
  font-size: 25px;
  font-weight: negrito;
  border: 1px sólido azul;
  background-color: verde;
}

O mixin também pode conter outros mixins:

Sintaxe SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

Passar variáveis para Mixin

Mixins aceitam parâmetros. Dessa forma, você pode passar variáveis para o mixin.

Aqui está a maneira de definir um mixin com parâmetros:

Sintaxe SCSS:

/* Define mixin com dois parâmetros */
@mixin bordered($color, $width) {
  border: $width sólido $color;
}
.myArticle {
  @include bordered(azul, 1px);  // Chama o mixin com dois valores
}
.myNotes {
  @include bordered(vermelho, 2px); // Chama o mixin com dois valores
}

Por favor, note que os parâmetros são configurados como variáveis e, em seguida, usados como valores da propriedade da borda (cor e largura).

Após a compilação, o CSS será conforme abaixo:

Saída do CSS:

.myArticle {
  border: 1px sólido azul;
}
.myNotes {
  border: 2px sólido vermelho;
}

Valores padrão do Mixin

Também pode ser definido um valor padrão para as variáveis do mixin:

Sintaxe SCSS:

@mixin bordered($color: azul, $width: 1px) {
  border: $width sólido $color;
}

Então, você só precisa especificar o valor a ser alterado ao chamar o mixin:

Sintaxe SCSS:

.myTips {
  @include bordered($color: orange);
}

Uso do Mixin como Prefixo de Fornecedor

Outra boa utilização do mixin é os prefixos de fornecedor (browser).

Este é um exemplo de transformação:

Sintaxe SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

Após a compilação, o CSS será conforme mostrado a seguir:

Sintaxe CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}