Критическое изменение: слэш как разделение
В настоящее время Sass рассматривает /
как операцию деления в одних контекстах и как разделитель в других. Это затрудняет пользователям Sass определение значения любого заданного символа /
и затрудняет работу с новыми функциями CSS, которые используют /
в качестве разделителя.
- Dart Sass
- partial
- LibSass
- ✗
- Ruby Sass
- ✗
Сегодня Sass использует сложную эвристику, чтобы выяснить, следует ли рассматривать символ /
как разделение или разделитель. Даже в этом случае в качестве разделителя он просто создает строку без кавычек, которую трудно проверить изнутри Sass. Поскольку все больше и больше функций CSS, таких как CSS Grid и новый синтаксис rgb()
и hsl()
используют /
в качестве разделителя, это становится все более и более болезненным для пользователей Sass.
Поскольку Sass - это надмножество CSS, мы сопоставляем синтаксис CSS, переопределяя /
как только разделитель. /
будет рассматриваться как новый тип разделителя списков, аналогичный тому, как ,
работает сегодня. Вместо этого деление будет записано с использованием новой функции math.div()
. Эта функция будет вести себя точно так же, как сегодня /
.
Это устаревание не влияет на использование /
внутри выражений calc()
.
Переходный период permalinkПереходный период
- Dart Sass
- since 1.33.0
- LibSass
- ✗
- Ruby Sass
- ✗
Чтобы облегчить переход, мы начали с добавления функции math.div()
. Оператор /
пока еще выполняет деление, но при этом также выводит предупреждение об устаревании. Пользователи должны переключить все подразделения на использование math.div()
.
Списки, разделенные косой чертой, также будут доступны в переходный период. Поскольку они пока не могут быть созданы с помощью /
, для их создания будет добавлена функция list.slash()
. Вы также сможете передать "slash"
в качестве разделителя $separator
функции list.join()
и функции list.append()
.
- Dart Sass
- since 1.40.0
- LibSass
- ✗
- Ruby Sass
- ✗
В качестве альтернативы пользователи могут заключать операции деления в выражение calc()
, которое Sass упростит до одного числа.
Автоматическая миграция permalinkАвтоматическая миграция
Вы можете использовать Sass мигратор для автоматического обновления ваших таблиц стилей для использования math.div()
и list.slash()
.
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss