Mudança de Rutura: Barra como Divisão

A Sass atualmente trata / como uma operação de divisão em alguns contextos e um separador em outros. Isto torna difícil para os utilizadores da Sass dizer o que qualquer dada / significará, e dificulta trabalhar com as novas funcionalidades da CSS que usam / como separador.

Compatibilidade:
Sass de Dart
partial
LibSass
✗
Sass de Ruby
✗

Hoje, a Sass usa heurísticas complexas para compreender se uma / deveria ser tratada como divisão ou um separador. Mesmo assim, uma vez que um separador apenas produz uma sequência de caracteres sem aspas é difícil inspecionar a partir de dentro da Sass. Conforme mais e mais funcionalidades de CSS como Grade de CSS e a nova sintaxe de rgb() e hsl() usam / como um separador, está a tornar-se ainda mais penoso para os utilizadores da Sass.

Uma vez que a Sass é um superconjunto de CSS, estamos a combinar a sintaxe da CSS redefinindo / para ser apenas um separador. / será tratado como um novo tipo de separador de lista, semelhante a como , funciona hoje. A divisão será escrita usando a nova função math.div(). Esta função comportar-se-á exatamente como / hoje.

Esta depreciação não afeta os usos de / dentro de expressões de calc():

SCSS Syntax

@use "sass:math";

// Sass do futuro, ainda não funciona!
.item3 {
  $row: span math.div(6, 2) / 7; // Uma lista separada por barra de dois elementos.
  grid-row: $row;
}

Sass Syntax

@use "sass:math"

// Sass do futuro, ainda não funciona!
.item3
  $row: span math.div(6, 2) / 7 // // Uma lista separada por barra de dois elementos.
  grid-row: $row

CSS Output

.item3 {
  grid-row: span 3 / 7;
}

Período de TransiçãoPeríodo de Transição permalink

Compatibilidade (math.div() e list.slash()):
Sass de Dart
since 1.33.0
LibSass
✗
Sass de Ruby
✗

Para facilitar a transição, começamos por adicionar a função math.div(). Por agora o operador / continua a fazer divisão, mas também imprime um aviso de depreciação quando o faz. Os utilizadores deveriam trocar todas as divisões para usarem math.div():

💡 Fato Divertido:

Lembra-te de que, podes silenciar os avisos de depreciação de bibliotecas que não controlas! Se estiveres a usar a interface da linha de comando podes passar a opção --quiet-deps, e se estiveres a usar a API de JavaScript podes definir a opção quietDeps para true.

SCSS Syntax

@use "sass:math";

// ERRADO, não funcionará nas futuras versões da Sass.
@debug (12px/4px); // 3

// CERTO, funcionará nas futuras versões da Sass.
@debug math.div(12px, 4px); // 3

Sass Syntax

@use "sass:math"

// ERRADO, não funcionará nas futuras versões da Sass.
@debug (12px/4px) // 3

// CERTO, funcionará nas futuras versões da Sass.
@debug math.div(12px, 4px) // 3

As listas separadas por barra também estarão disponíveis no período de transição. Uma vez que ainda não podem ser criadas com /, a função list.slash() será adicionada para criá-las. Tu também serás capaz de passar "slash" como o $separator para a função list.join() e a função list.append():

SCSS Syntax

@use "sass:list";
@use "sass:math";

.item3 {
  $row: list.slash(span math.div(6, 2), 7);
  grid-row: $row;
}

Sass Syntax

@use "sass:list"
@use "sass:math"

.item3
  $row: list.slash(span math.div(6, 2), 7)
  grid-row: $row

CSS Output

.item3 {
  grid-row: span 3 / 7;
}
Compatibilidade (calc() de primeira classe):
Sass de Dart
since 1.40.0
LibSass
✗
Sass de Ruby
✗

Alternativamente, os utilizadores podem envolver os operadores de divisão dentro duma expressão de calc(), o qual a Sass simplificará para um único número:

SCSS Syntax

// ERRADO, não funcionará nas futuras versões da Sass.
@debug (12px/4px); // 3

// CERTO, funcionará nas futuras versões da Sass.
@debug calc(12px / 4px); // 3

Sass Syntax

// ERRADO, não funcionará nas futuras versões da Sass.
@debug (12px/4px) // 3

// CERTO, funcionará nas futuras versões da Sass.
@debug calc(12px / 4px) // 3

Migração AutomáticaMigração Automática permalink

Tu podes usar o migrador da Sass para atualizar automaticamente as tuas folhas de estilo para usarem math.div() e list.slash().

$ npm install -g sass-migrator
$ sass-migrator division **/*.scss