Критическое изменение: слэш как разделение

В настоящее время Sass рассматривает / как операцию деления в одних контекстах и как разделитель в других. Это затрудняет пользователям Sass определение значения любого заданного символа / и затрудняет работу с новыми функциями CSS, которые используют / в качестве разделителя.

Совместимость:
Dart Sass
partial
LibSass
✗
Ruby Sass
✗

Сегодня Sass использует сложную эвристику, чтобы выяснить, следует ли рассматривать символ / как разделение или разделитель. Даже в этом случае в качестве разделителя он просто создает строку без кавычек, которую трудно проверить изнутри Sass. Поскольку все больше и больше функций CSS, таких как CSS Grid и новый синтаксис rgb() и hsl() используют / в качестве разделителя, это становится все более и более болезненным для пользователей Sass.

Поскольку Sass - это надмножество CSS, мы сопоставляем синтаксис CSS, переопределяя / как только разделитель. / будет рассматриваться как новый тип разделителя списков, аналогичный тому, как , работает сегодня. Вместо этого деление будет записано с использованием новой функции math.div(). Эта функция будет вести себя точно так же, как сегодня /.

Это устаревание не влияет на использование / внутри выражений calc().

SCSS Syntax

@use "sass:math";

// Future Sass, пока не работает!
.item3 {
  $row: span math.div(6, 2) / 7; // Список из двух элементов, разделенных косой чертой.
  grid-row: $row;
}

Sass Syntax

@use "sass:math"

// Future Sass, пока не работает!
.item3
  $row: span math.div(6, 2) / 7 // Список из двух элементов, разделенных косой чертой.
  grid-row: $row

CSS Output

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

Переходный период permalinkПереходный период

Совместимость (math.div() and list.slash()):
Dart Sass
since 1.33.0
LibSass
✗
Ruby Sass
✗

Чтобы облегчить переход, мы начали с добавления функции math.div(). Оператор / пока еще выполняет деление, но при этом также выводит предупреждение об устаревании. Пользователи должны переключить все подразделения на использование math.div().

SCSS Syntax

@use "sass:math";

// НЕПРАВИЛЬНО, не будет работать в будущих версиях Sass.
@debug (12px/4px); // 3

// ПРАВИЛЬНО, будет работать в будущих версиях Sass.
@debug math.div(12px, 4px); // 3

Sass Syntax

@use "sass:math"

// НЕПРАВИЛЬНО, не будет работать в будущих версиях Sass.
@debug (12px/4px) // 3

// ПРАВИЛЬНО, будет работать в будущих версиях Sass.
@debug math.div(12px, 4px) // 3

Списки, разделенные косой чертой, также будут доступны в переходный период. Поскольку они пока не могут быть созданы с помощью /, для их создания будет добавлена функция list.slash(). Вы также сможете передать "slash" в качестве разделителя $separator функции list.join() и функции 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;
}
Совместимость (First-class calc):
Dart Sass
since 1.40.0
LibSass
✗
Ruby Sass
✗

В качестве альтернативы пользователи могут заключать операции деления в выражение calc(), которое Sass упростит до одного числа.

SCSS Syntax

// НЕПРАВИЛЬНО, не будет работать в будущих версиях Sass.
@debug (12px/4px); // 3

// ПРАВИЛЬНО, будет работать в будущих версиях Sass.
@debug calc(12px / 4px); // 3

Sass Syntax

// НЕПРАВИЛЬНО, не будет работать в будущих версиях Sass.
@debug (12px/4px) // 3

// ПРАВИЛЬНО, будет работать в будущих версиях Sass.
@debug calc(12px / 4px) // 3

Автоматическая миграция permalinkАвтоматическая миграция

Вы можете использовать Sass мигратор для автоматического обновления ваших таблиц стилей для использования math.div() и list.slash().

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