@mixin e @include

As misturas são definidas usando a regra de arroba @mixin, que é escrita com @mixin <name> { ... } ou @mixin name(<arguments...>) { ... }. Um nome de mistura pode ser qualquer identificador de Sass, e pode conter qualquer declaração exceto declarações de alto nível. Elas podem ser usada para encapsular os estilos que podem ser reduzidos numa única regra de estilo; elas podem conter regras de estilo de si mesmas que podem ser encaixadas em outras regras de estilos ou incluídas no alto nível da folha de estilo; ou podem apenas servir para modificar variáveis.

As misturas são incluídas no contexto atual usando a regra de arroba @include, que é escrita com @include <name> ou @include <name>(<arguments...>), com o nome da mistura sendo incluído:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
  @include reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em




nav ul
  @include horizontal-list

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

ArgumentosArgumentos permalink

As misturas também podem receber argumentos, o que permite que o seu comportamento seja personalizado cada vez que forem chamadas. Os argumentos são especificados na regra @mixin depois do nome da mistura, como uma lista de nomes de variáveis envolvidos por parênteses. A mistura deve então ser incluída com o mesmo número de argumentos na forma de expressões de SassScript. Os valores destas expressões estão disponíveis dentro do corpo da mistura de acordo com as variáveis correspondentes:

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

@mixin rtl($property, $ltr-value, $rtl-value)
  #{$property}: $ltr-value

  [dir=rtl] &
    #{$property}: $rtl-value



.sidebar
  @include rtl(float, left, right)

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

Argumentos OpcionaisArgumentos Opcionais permalink

Normalmente, todo argumento que uma mistura declara deve ser passado quando esta mistura for incluída. No entanto, podes tornar um argumento opcional definindo um valor padrão que será usado se este argumento não for passado. Os valores padrão usam a mesma sintaxe que as declarações de variáveis: o nome da variável, seguido por dois pontos e uma expressão de SassScript. Isto torna fácil definir APIs de mistura flexíveis que podem ser usadas de maneiras simples ou complexas:

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

@mixin replace-text($image, $x: 50%, $y: 50%)
  text-indent: -99999em
  overflow: hidden
  text-align: left

  background:
    image: $image
    repeat: no-repeat
    position: $x $y

.mail-icon
  @include replace-text(url("/images/mail.svg"), 0)

.mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

Argumentos de Palavra-ChaveArgumentos de Palavra-Chave permalink

Quando uma mistura é incluída, os argumentos podem ser passados pelo nome além de passá-los pelas suas posições na lista de argumento. Isto é especialmente útil para misturas com vários argumentos opcionais, ou com argumentos booleanos cujos significados não são óbvios sem um nome ir com eles. Os argumentos de palavra-chave usa a mesma sintaxe que as declarações de variáveis e argumentos opcionais:

@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}

@mixin square($size, $radius: 0)
  width: $size
  height: $size

  @if $radius != 0
    border-radius: $radius



.avatar
  @include square(100px, $radius: 4px)

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

Recebendo Argumentos ArbitráriosRecebendo Argumentos Arbitrários permalink

Algumas vezes é útil para uma mistura ser capaz de receber qualquer número de argumentos. Se o último argumento numa declaração de @mixin terminar em ..., então todos argumentos adicionais para esta mistura são passado para este argumento como uma lista. Este argumento é conhecido como uma lista de argumento:

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

@mixin order($height, $selectors...)
  @for $i from 0 to length($selectors)
    #{nth($selectors, $i + 1)}
      position: absolute
      height: $height
      margin-top: $i * $height




@include order(150px, "input.name", "input.address", "input.zip")

input.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

Recebendo Argumentos de Palavra-Chave ArbitráriosRecebendo Argumentos de Palavra-Chave Arbitrários permalink

As listas de argumentos também podem ser usadas para receber argumentos de palavra-chave arbitrários. A função meta.keywords() recebe uma lista de argumento e retorna quaisquer palavras-chave adicionais que foram passadas para a mistura como um mapa a partir dos nomes de argumento (sem incluir $) à estes valores dos argumentos:

@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

@use "sass:meta"

@mixin syntax-colors($args...)
  @debug meta.keywords($args)
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args)
    pre span.stx-#{$name}
      color: $color




@include syntax-colors($string: #080, $comment: #800, $variable: #60b)

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

Passando Argumentos ArbitráriosPassando Argumentos Arbitrários permalink

Tais como as listas de argumentos permitem as misturas receber argumentos posicionais arbitrários ou de palavra-chave, a mesma sintaxe pode ser usada para passar argumentos posicionais e de palavra-chave à uma mistura. Se passares uma lista seguida por ... como último argumento duma inclusão, os seus elementos serão tratados como argumentos posicionais adicionais. De maneira semelhante, um mapa seguido por ... será tratado como argumentos de palavra-chave adicionais. Tu podes mesmo passar ambos duma vez!

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);

$form-selectors: "input.name", "input.address", "input.zip" !default

@include order(150px, $form-selectors...)

@mixin btn($args...) {
  @warn "The btn() mixin is deprecated. Include button() instead.";
  @include button($args...);
}

@mixin btn($args...)
  @warn "The btn() mixin is deprecated. Include button() instead."
  @include button($args...)

Blocos de ConteúdoBlocos de Conteúdo permalink

Além de receber argumentos, uma mistura pode receber um bloco inteiro de estilos, conhecido como um bloco de conteúdo. Uma mistura pode declarar que recebe um bloco de conteúdo incluindo a regra de arroba @content no seu corpo. O bloco de conteúdo é passado usando chavetas como qualquer outro bloco na Sass, e é injetado no lugar da regra @content:

@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}

@mixin hover
  &:not([disabled]):hover
    @content



.button
  border: 1px solid black
  @include hover
    border-width: 2px

.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}

Passando Argumentos aos Blocos de ConteúdoPassando Argumentos aos Blocos de Conteúdo permalink

Compatibilidade:

Sass de Dart

since 1.15.0

LibSass

✗

Sass de Ruby

✗

Uma mistura pode passar argumentos ao seu bloco de conteúdo da mesma maneira que passaria argumentos à uma outra mistura escrevendo @content(<arguments...>). O utilizador escrevendo o bloco de conteúdo pode aceitar argumentos escrevendo @include <name> using (<arguments...>). A lista de argumentos para um bloco de conteúdo funciona tal como uma lista de argumento duma mistura, e os argumentos passados para ele por @content funcionam tal como a passagem de argumentos à uma mistura.

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

@mixin media($types...)
  @each $type in $types
    @media #{$type}
      @content($type)




@include media(screen, print) using ($type)
  h1
    font-size: 40px
    @if $type == print
      font-family: Calluna

@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

Sintaxe de Mistura IndentadaSintaxe de Mistura Indentada permalink

A sintaxe indentada tem uma sintaxe especial para definir e usar misturas, além da padrão @mixin e @include. As misturas são definidas usando o carácter =, e são incluídas usando +. Embora esta sintaxe seja mais concisa, é também mais difícil de entender a primeira vista e os utilizadores são encorajados a evitá-la:

=reset-list
  margin: 0
  padding: 0
  list-style: none

=horizontal-list
  +reset-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

nav ul
  +horizontal-list

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}