dart sass
1.81.0
Реализация Sass в Dart. Sass делает CSS интересным .
Использование Дарт Сасс
Пакет sass_api
Dart Sass в браузере
Устаревший API JavaScript
Использование Sass с Jest
Из Chocolatey или Scoop (Windows)
Из доморощенного (macOS)
Автономный
Из НПМ
Из паба
Из источника
В Докере
Почему Дарт?
Политика совместимости
Совместимость браузера
Совместимость с Node.js
Неверный CSS
Встроенный Дарт Сасс
Использование
Поведенческие отличия от Ruby Sass
Существует несколько различных способов установки и запуска Dart Sass, в зависимости от вашей среды и ваших потребностей.
Если вы используете менеджер пакетов Chocolatey или менеджер пакетов Scoop для Windows, вы можете установить Dart Sass, запустив
шоколадная установка Sass
или
совок установить sass
Это даст вам исполняемый файл sass в командной строке, который будет запускать Dart Sass. Подробности смотрите в документации CLI.
Если вы используете менеджер пакетов Homebrew, вы можете установить Dart Sass, запустив
заварить установку sass/sass/sass
Это даст вам исполняемый файл sass в командной строке, который будет запускать Dart Sass.
Вы можете скачать автономный архив Dart Sass для вашей операционной системы, содержащий виртуальную машину Dart и снимок исполняемого файла, со страницы выпуска GitHub. Извлеките его, добавьте каталог в свой путь, перезапустите терминал, и исполняемый файл sass готов к запуску!
Dart Sass доступен в виде пакета npm, скомпилированного в JavaScript. Вы можете установить его глобально, используя npm install -g sass , который предоставит доступ к исполняемому файлу sass . Вы также можете добавить его в свой проект, используя npm install --save-dev sass . Это предоставляет исполняемый файл, а также библиотеку:
const sass = require('sass');const result = sass.compile(scssFilename);// ИЛИ// Обратите внимание, что `compileAsync()` существенно медленнее, чем `compile()`.const result = await sass.compileAsync( scsFilename);Посетите веб-сайт Sass для получения полной документации по API.
Пакет sass npm также можно запустить непосредственно в браузере. Он совместим со всеми основными сборщиками веб-страниц, если вы отключите переименование (например, --keep-names в esbuild). Вы также можете импортировать его непосредственно из браузера как модуль ECMAScript без какого-либо объединения (при условии, что node_modules также обслуживается):
<script type="importmap">
{"imports": { "immutable": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"}
</script><!-- Поддержка таких браузеров, как Safari 16.3, без поддержки импорта карт. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
импортировать * как дерзость из 'sass';
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>Или из CDN:
<script type="importmap">
{"imports": { "immutable": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"}
</script><!-- Поддержка таких браузеров, как Safari 16.3, без поддержки импорта карт. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
импортировать * как дерзость из 'sass';
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>Или даже в комплекте со всеми его зависимостями:
<тип сценария="модуль">
импортировать * как sass из https://jspm.dev/sass;
console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script> Поскольку у браузера нет доступа к файловой системе, функции compile() и compileAsync() для него недоступны. Если вы хотите загрузить другие файлы, вам нужно будет передать собственный импортер в compileString() или compileStringAsync() . Устаревший API также не поддерживается в браузере.
Dart Sass также поддерживает более старый API JavaScript, который полностью совместим с Node Sass (за некоторыми исключениями, перечисленными ниже), с поддержкой функций render() и renderSync() . Этот API считается устаревшим и будет удален в Dart Sass 2.0.0, поэтому его следует избегать в новых проектах.
Поддержка Sass устаревшего API JavaScript имеет следующие ограничения:
Поддерживаются только "expanded" и "compressed" значения параметра outputStyle .
Dart Sass не поддерживает параметр precision . Dart Sass по умолчанию использует достаточно высокую точность для всех существующих браузеров, и если сделать ее настраиваемой, код существенно снизится.
Dart Sass не поддерживает опцию sourceComments . Исходные карты — это рекомендуемый способ определения происхождения сгенерированных селекторов.
Если вы используете Jest для запуска своих тестов, имейте в виду, что в нем есть давняя ошибка, из-за которой его тестовая среда по умолчанию нарушает встроенный в JavaScript оператор instanceof . JS-пакет Dart Sass довольно активно использует instanceof , поэтому, чтобы избежать взлома Sass, вам необходимо установить jest-environment-node-single-context и добавить testEnvironment: 'jest-environment-node-single-context' в вашу конфигурацию Jest. .
Если вы пользователь Dart, вы можете установить Dart Sass глобально, используя pub global activate sass , который предоставит исполняемый файл sass . Вы также можете добавить его в свою pubspec и использовать в качестве библиотеки. Мы настоятельно рекомендуем импортировать его с префиксом sass :
import 'package:sass/sass.dart' как sass;void main(List<String> args) { print(sass.compile(args.first));
}Подробности см. в документации по Dart API.
sass_api Пользователи Dart также имеют доступ к более подробным API через пакет sass_api . Это обеспечивает доступ к Sass AST и API для разрешения загрузок Sass без выполнения полной компиляции. Он выделен в отдельный пакет, чтобы иметь возможность увеличивать номер версии независимо от основного пакета sass .
Предполагая, что вы уже проверили этот репозиторий:
Установите Дарт. Если вы загружаете архив вручную, а не с помощью установщика, убедитесь, что каталог bin SDK находится в вашем PATH .
Установите Буф. Это используется для создания буферов протокола для встроенного компилятора.
В этом репозитории запустите dart pub get . Это установит зависимости Dart Sass.
Запускай dart run grinder protobuf . Это позволит загрузить и построить встроенное определение протокола.
Запустите dart bin/sass.dart path/to/file.scss .
Вот и все!
Вы можете установить и запустить Dart Sass в Docker, используя следующие команды Dockerfile:
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# Добавьте файлы scssCOPY --from=another_stage /app /app# Включить буфер протоколаbinaryCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR/dart-sassRUN git clone https://github.com/sass/dart-sass.git. && дартс-паб, получи && dart run grinder protobuf# Здесь вы запускаете sass.dart в своих файлах scss.RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css
Dart Sass заменил Ruby Sass в качестве канонической реализации языка Sass. Мы выбрали Dart, потому что он имеет ряд преимуществ:
Это быстро. Виртуальная машина Dart высоко оптимизирована и постоянно работает быстрее (последние показатели производительности см. в perf.md ). Он намного быстрее, чем Ruby, и близок к C++.
Он портативный. Виртуальная машина Dart не имеет внешних зависимостей и может компилировать приложения в отдельные файлы снимков, поэтому мы можем распространять Dart Sass только в виде трех файлов (виртуальная машина, снимок и сценарий-оболочка). Dart также можно скомпилировать в JavaScript, что позволяет легко распространять Sass через npm, который уже использует большинство наших пользователей.
Легко писать. Dart — это язык более высокого уровня, чем C++, а это значит, что он не требует особых хлопот с управлением памятью и системами сборки. Он также статически типизирован, что позволяет с уверенностью выполнять крупные рефакторинги, чем в Ruby.
Это более дружелюбно к участникам. Dart существенно легче изучить, чем Ruby, и многие пользователи Sass, в частности, в Google, уже знакомы с ним. Больше участников означает более быструю и последовательную разработку.
По большей части Dart Sass следует семантическому версионированию. Мы считаем, что все следующее является частью версионного API:
Семантика языка Sass, реализованная Dart Sass.
API Дарта.
API JavaScript.
Интерфейс командной строки.
Поскольку Dart Sass имеет единственную версию, которая используется всеми Dart, JavaScript и автономными дистрибутивами, это может означать, что мы увеличиваем основной номер версии, когда на самом деле нет критических изменений для одного или нескольких дистрибутивов. Однако мы постараемся ограничить количество вносимых критических изменений и сгруппировать их в как можно меньшее количество выпусков, чтобы минимизировать отток. Мы настоятельно рекомендуем пользователям использовать журнал изменений для полного понимания всех изменений в каждом выпуске.
Существует одно исключение, когда критические изменения могут быть внесены вне основной версии версии. Иногда CSS добавляет функцию, которая каким-то образом несовместима с существующим синтаксисом Sass. Поскольку Sass стремится к полной совместимости с CSS, нам иногда приходится нарушать совместимость со старым кодом Sass, чтобы оставаться совместимым с CSS.
В таких случаях мы сначала выпустим версию Sass, которая выдает предупреждения об устаревании для любых таблиц стилей, поведение которых изменится. Затем, по крайней мере, через три месяца после выпуска версии с этими предупреждениями об устаревании, мы выпустим минорную версию с критическим изменением семантики языка Sass.
В общем, мы считаем любое изменение вывода CSS Dart Sass, которое может привести к тому, что этот CSS перестанет работать в реальном браузере, является критическим изменением. Однако в некоторых случаях такое изменение будет иметь существенные преимущества и лишь отрицательно повлияет на небольшое количество редко используемых браузеров. Мы не хотим блокировать такое изменение в основной версии.
Таким образом, если изменение приведет к нарушению совместимости с менее чем 2% доли мирового рынка браузеров по данным StatCounter GlobalStats, мы можем выпустить минорную версию Dart Sass с этим изменением.
Мы считаем прекращение поддержки определенной версии Node.js кардинальным изменением , пока эта версия все еще поддерживается Node.js. Это означает, что выпуски указаны как текущие, активные LTS или обслуживающие LTS в соответствии со страницей выпусков Node.js. Как только версия Node.js выходит из LTS, Dart Sass может при необходимости прекратить поддержку.
Изменения в поведении таблиц стилей Sass, которые приводят к недопустимому выводу CSS, не считаются критическими изменениями. Такие изменения почти всегда необходимы при добавлении поддержки новых функций CSS, а откладывание всех таких функций до выхода новой основной версии было бы неоправданно обременительным для большинства пользователей.
Например, когда Sass начал анализировать выражения calc() , недопустимое выражение calc(1 +) стало ошибкой Sass, хотя раньше оно передавалось как есть. Это не считалось критическим изменением, потому что calc(1 +) изначально никогда не был допустимым CSS.
Dart Sass включает реализацию компиляторной части протокола Embedded Sass. Он предназначен для внедрения в основной язык, который затем предоставляет пользователям API для вызова Sass и определения пользовательских функций и средств импорта.
sass --embedded запускает встроенный компилятор и прослушивает стандартный ввод.
sass --embedded --version печатает versionResponse с id = 0 в JSON и завершает работу.
Флаг командной строки --embedded недоступен, если вы устанавливаете Dart Sass как пакет npm. Никакие другие флаги командной строки с --embedded не поддерживаются.
Между Dart Sass и Ruby Sass есть несколько преднамеренных различий в поведении. Обычно это места, где Ruby Sass ведет себя нежелательно, и реализовать правильное поведение существенно проще, чем реализовать совместимое поведение. Все они должны иметь отслеживание ошибок в Ruby Sass для обновления ссылочного поведения.
@extend принимает только простые селекторы, как и второй аргумент selector-extend() . См. выпуск 1599.
Селекторы тем не поддерживаются. См. выпуск 1126.
Аргументы псевдоселектора анализируются как <declaration-value> вместо более ограниченного пользовательского анализа. См. выпуск 2120.
Числовая точность установлена на 10. См. проблему 1122.
Синтаксический анализатор с отступами более гибок: он не требует одинаковых отступов по всему документу. См. выпуск 2176.
Цвета не поддерживают поканальную арифметику. См. выпуск 2144.
Числа без единиц измерения не являются == числам единиц с тем же значением. Кроме того, ключи карты следуют той же логике, что и == -equality. См. выпуск 1496.
Альфа-значения rgba() и hsla() в процентах интерпретируются как проценты. Другие юниты запрещены. См. выпуск 1525.
Слишком много переменных аргументов, переданных функции, является ошибкой. См. выпуск 1408.
Разрешить @extend выходить за пределы медиа-запроса, если за пределами этого запроса определен идентичный @extend . Это не отслеживается явно, поскольку не будет иметь значения, когда проблема 1050 будет исправлена.
Некоторые псевдоселекторы, содержащие селекторы-заполнители, будут скомпилированы там, где их не будет в Ruby Sass. Это лучше соответствует семантике рассматриваемых селекторов и более эффективно. См. выпуск 2228.
Синтаксис :property value старого стиля не поддерживается в синтаксисе с отступом. См. выпуск 2245.
Ссылочный комбинатор не поддерживается. См. выпуск 303.
Унификация универсального селектора симметрична. См. выпуск 2247.
@extend не выдает ошибку, если совпадает, но не может унифицироваться. См. выпуск 2250.
Dart Sass в настоящее время поддерживает только документы UTF-8. Мы хотели бы поддерживать больше, но Dart в настоящее время их не поддерживает. См., например, dart-lang/sdk#11744.
Отказ от ответственности: это не официальный продукт Google.
