Regras de Arroba da CSS

Compatibilidade (Interpolação do Nome):

Sass de Dart

since 1.15.0

LibSass

✗

Sass de Ruby

✗

▶

A Sass suporta todas as regras de arroba que são parte da própria CSS. Para continuar flexível e compatível com as versões do futuro da CSS, a Sass tem suporte geral que cobre quase todas as regras de arroba por padrão. Um regra de arroba de CSS é escrito como @<name> <value>, @<name> { ... }, ou @<name> <value> { ... }. O nome deve ser um identificador, e o valor (se existir um) pode ser mais ou menos qualquer coisa. Tanto o nome e o valor podem conter interpolação:

@namespace svg url(http://www.w3.org/2000/svg);

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
}

@namespace svg url(http://www.w3.org/2000/svg)

@font-face
  font-family: "Open Sans"
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")

@counter-style thumbs
  system: cyclic
  symbols: "\1F44D"

@charset "UTF-8";
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
  system: cyclic;
  symbols: "👍";
}

Se uma regra de arroba da CSS estiver encaixada dentro duma regra de estilo, as duas trocam automaticamente de posição para que a regra de arroba esteja no alto nível da saída de CSS e a regra de estilo esteja dentro dela. Isto torna fácil adicionar estilização condicional sem ter de reescrever o seletor da regra de estilo:

.print-only {
  display: none;

  @media print { display: block; }
}

.print-only
  display: none

  @media print
    display: block

.print-only {
  display: none;
}
@media print {
  .print-only {
    display: block;
  }
}

@media@media permalink

Compatibilidade (Sintaxe de Limite):

Sass de Dart

since 1.11.0

LibSass

✗

Sass de Ruby

since 3.7.0

▶

@media (width <= 700px) {
  body {
    background: green;
  }
}

@media (width <= 700px)
  body
    background: green

@media (width <= 700px) {
  body {
    background: green;
  }
}

A regra @media faz tudo de cima e mais. Além de permitir interpolação, permite expressões de SassScript seja usada diretamente nas consultas de funcionalidades:

$layout-breakpoint-small: 960px;

@media (min-width: $layout-breakpoint-small) {
  .hide-extra-small {
    display: none;
  }
}

$layout-breakpoint-small: 960px

@media (min-width: $layout-breakpoint-small)
  .hide-extra-small
    display: none

@media (min-width: 960px) {
  .hide-extra-small {
    display: none;
  }
}

Quando possível, a Sass também combinará as consultas de media que são encaixadas dentro de umas das outras para facilitar o suporte de navegadores que ainda não suportam de maneira nativa as regras de @media encaixadas:

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;

    @media (color) {
      border-color: #036;
    }
  }
}

@media (hover: hover)
  .button:hover
    border: 2px solid black

    @media (color)
      border-color: #036

@media (hover: hover) {
  .button:hover {
    border: 2px solid black;
  }
}
@media (hover: hover) and (color) {
  .button:hover {
    border-color: #036;
  }
}

@supports@supports permalink

A regra @supports também permite que expressões de SassScript sejam usadas nas consultas de declaração:

@mixin sticky-position {
  position: fixed;
  @supports (position: sticky) {
    position: sticky;
  }
}

.banner {
  @include sticky-position;
}

@mixin sticky-position
  position: fixed
  @supports (position: sticky)
    position: sticky



.banner
  @include sticky-position

.banner {
  position: fixed;
}
@supports (position: sticky) {
  .banner {
    position: sticky;
  }
}

@keyframes@keyframes permalink

A regra @keyframes funciona como uma regra de arroba normal, exceto que suas regras filho devem ser regras de keyframe válidas (<number>%, from, ou to) no lugar de seletores normais:

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }

  70% {
    margin-left: 90%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes slide-in
  from
    margin-left: 100%
    width: 300%


  70%
    margin-left: 90%
    width: 150%


  to
    margin-left: 0%
    width: 100%

@keyframes slide-in {
  from {
    margin-left: 100%;
    width: 300%;
  }
  70% {
    margin-left: 90%;
    width: 150%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}