Dart Sass Командная строка
Использование
Исполняемый файл Dart Sass можно вызывать в одном из двух режимов.
Режим один к одному
sass <input.scss> [output.css]
В режиме один к одному компилируется один входной файл (input.scss) в одно место вывода (output.css). Если место вывода не указано, скомпилированный CSS выводится в терминал.
Входной файл анализируется как SCSS, если его расширение равно .scss, как отступный синтаксис, если его расширение равно .sass, или как простой CSS, если его расширение равно .css. Если у него нет одного из этих трёх расширений или он берётся из стандартного ввода, по умолчанию он анализируется как SCSS. Это можно изменить с помощью флага --indented.
Специальная строка - может быть передана вместо входного файла, чтобы указать Sass на чтение входного файла из стандартного ввода. Sass по умолчанию будет анализировать его как SCSS, если не передан флаг --indented.
Режим многие ко многим
- Dart Sass
- с версии 1.4.0
sass [<input.scss>:<output.css>] [<input/>:<output/>]...
В режиме многие ко многим компилируется один или несколько входных файлов в один или несколько выходных файлов. Входные и выходные файлы разделяются двоеточием. Он также может компилировать все файлы Sass в каталоге в файлы CSS с такими же именами в другом каталоге.
# Compiles style.scss to style.css.
$ sass style.scss:style.css
# Compiles light.scss and dark.scss to light.css and dark.css.
$ sass light.scss:light.css dark.scss:dark.css
# Compiles all Sass files in themes/ to CSS files in public/css/.
$ sass themes:public/cssПри компиляции целых каталогов Sass проигнорирует частичные файлы, имена которых начинаются с _. Вы можете использовать части для разделения стилей, не создавая кучу ненужных выходных файлов.
Параметры
Вход и вывод
Эти параметры управляют тем, как Sass загружает входные файлы и как генерирует выходные файлы.
--stdin
Этот флаг — альтернативный способ указать Sass на чтение входного файла из стандартного ввода. Если он передан, входной файл передавать не нужно.
$ echo "h1 {font-size: 40px}" | sass --stdin h1.css
$ echo "h1 {font-size: 40px}" | sass --stdin
h1 {
font-size: 40px;
}
Флаг --stdin нельзя использовать в режиме многие ко многим.
--indented
Этот флаг сообщает Sass о необходимости анализа входного файла как отступного синтаксиса. Если он используется в режиме многие ко многим, все входные файлы анализируются как отступный синтаксис, хотя файлы, которые они используют, будут анализироваться в обычном режиме. Обратный флаг --no-indented позволяет принудительно анализировать все входные файлы как SCSS.
Флаг --indented полезен в основном тогда, когда входной файл поступает из стандартного ввода, поэтому его синтаксис нельзя определить автоматически.
$ echo -e 'h1\n font-size: 40px' | sass --indented -
h1 {
font-size: 40px;
}
--load-path
Этот параметр (сокращённо -I) добавляет дополнительный путь загрузки для Sass, чтобы найти таблицы стилей. Его можно передать несколько раз для указания нескольких путей загрузки. Пути загрузки, перечисленные ранее, имеют приоритет над последующими.
$ sass --load-path=node_modules/bootstrap/dist/css style.scss style.css
--pkg-importer=node
- Dart Sass
- с версии 1.71.0
Этот параметр (сокращённо -p node) добавляет импорт пакета Node.js pkg: в конец пути загрузки, чтобы таблицы стилей могли загружать зависимости с помощью алгоритма разрешения модулей Node.js.
В будущем могут быть добавлены возможности поддержки дополнительных встроенных pkg: импортеров.
$ sass --pkg-importer=node style.scss style.css
--style
Этот параметр (сокращённо -s) управляет стилем вывода полученного CSS. Dart Sass поддерживает два стиля вывода:
-
expanded(по умолчанию) записывает каждый селектор и объявление на отдельной строке. -
compressedудаляет как можно больше лишних символов и записывает всю таблицу стилей в одну строку.
$ sass --style=expanded style.scss
h1 {
font-size: 40px;
}
$ sass --style=compressed style.scss
h1{font-size:40px}
--no-charset
- Dart Sass
- с версии 1.19.0
Этот флаг указывает Sass на то, чтобы никогда не генерировать объявление @charset или UTF-8 знак порядка байтов. По умолчанию или если передан флаг --charset, Sass будет вставлять объявление @charset (в режиме расширенного вывода) или знак порядка байтов (в режиме сжатого вывода), если таблица стилей содержит любые символы, не являющиеся ASCII.
$ echo 'h1::before {content: "👭"}' | sass --no-charset
h1::before {
content: "👭";
}
$ echo 'h1::before {content: "👭"}' | sass --charset
@charset "UTF-8";
h1::before {
content: "👭";
}
--error-css
- Dart Sass
- с версии 1.20.0
Этот флаг указывает Sass, нужно ли генерировать файл CSS при возникновении ошибки во время компиляции. Этот файл CSS описывает ошибку в комментарии и в свойстве content объекта body::before, чтобы вы могли увидеть сообщение об ошибке в браузере, не переключаясь обратно в терминал.
По умолчанию флаг для генерации CSS ошибок включён, если вы компилируете в хотя бы один файл на диске (в отличие от стандартного вывода). Вы можете явно указать --error-css, чтобы включить его даже при компиляции в стандартный вывод, или --no-error-css, чтобы отключить его повсюду. Когда он отключён, флаги --update и --watch удалят файлы CSS вместо этого при возникновении ошибки.
$ sass --error-css style.scss style.css
/* Error: Incompatible units em and px.
* ,
* 1 | $width: 15px + 2em;
* | ^^^^^^^^^^
* '
* test.scss 1:9 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
"Droid Sans Mono", monospace, monospace;
white-space: pre;
display: block;
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Incompatible units em and px.\a \2577 \a 1 \2502 $width: 15px + 2em;\a \2502 ^^^^^^^^^^\a \2575 \a test.scss 1:9 root stylesheet";
}
Error: Incompatible units em and px.
╷
1 │ $width: 15px + 2em;
│ ^^^^^^^^^^
╵
test.scss 1:9 root stylesheet
--update
- Dart Sass
- с версии 1.4.0
Если передан флаг --update, Sass будет компилировать только те таблицы стилей, зависимости которых были изменены позже, чем соответствующий файл CSS был сгенерирован. Также будут выводиться сообщения об обновлении таблиц стилей.
$ sass --update themes:public/css
Compiled themes/light.scss to public/css/light.css.
Карты исходного кода
- Dart Sass
- с версии 1.3.0
Карты исходного кода — это файлы, которые сообщают браузерам или другим инструментам, использующим CSS, как этот CSS соответствует файлам Sass, из которых он был сгенерирован. Они позволяют просматривать и даже редактировать ваши файлы Sass в браузере. Инструкции по использованию карт исходного кода см. в Chrome и Firefox.
Dart Sass генерирует карты исходного кода по умолчанию для каждого файла CSS, который он генерирует.
--no-source-map
Если передан флаг --no-source-map, Sass не будет генерировать никакие карты исходного кода. Он не может быть передан вместе с другими параметрами карт исходного кода.
$ sass --no-source-map style.scss style.css
--source-map-urls
Этот параметр управляет тем, как сгенерированные Sass карты исходного кода связывают файлы Sass с файлами сгенерированного CSS. Dart Sass поддерживает два типа URL:
-
relative(по умолчанию) использует относительные URL от расположения файла карты исходного кода до расположения файла исходного кода Sass. -
absoluteиспользует абсолютныеfile:URL файлов исходного кода Sass. Обратите внимание, что абсолютные URL будут работать только на том же компьютере, на котором был скомпилирован CSS.
# Generates a URL like "../sass/style.scss".
$ sass --source-map-urls=relative sass/style.scss css/style.css
# Generates a URL like "file:///home/style-wiz/sassy-app/sass/style.scss".
$ sass --source-map-urls=absolute sass/style.scss css/style.css
--embed-sources
Этот флаг указывает Sass на то, чтобы встроить содержимое файлов Sass, которые внесли вклад в сгенерированный CSS, в карту исходного кода. Это может привести к очень большим картам исходного кода, но гарантирует, что исходный код будет доступен на любом компьютере независимо от того, как CSS обслуживается.
$ sass --embed-sources sass/style.scss css.style.css
--embed-source-map
Этот флаг указывает Sass на то, чтобы встроить содержимое файла карты исходного кода в сгенерированный CSS, а не создавать отдельный файл и ссылаться на него из CSS.
$ sass --embed-source-map sass/style.scss css.style.cssДругие параметры
--watch
- Dart Sass
- с версии 1.6.0
Этот флаг (сокращённо -w) действует как флаг --update, но после первой компиляции Sass остаётся открытым и продолжает компиляцию таблиц стилей всякий раз, когда они или их зависимости меняются.
Sass отслеживает только те каталоги, которые вы передаёте напрямую в командной строке, родительские каталоги имен файлов, которые вы передаёте в командной строке, и пути загрузки. Он не отслеживает дополнительные каталоги, основанные на правилах @import/@use/ @forward файлов.
$ sass --watch themes:public/css
Compiled themes/light.scss to public/css/light.css.
# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.
--poll
- Dart Sass
- с версии 1.8.0
Этот флаг, который можно передавать только вместе с --watch, сообщает Sass вручную проверять изменения в исходных файлах время от времени вместо того, чтобы полагаться на уведомления операционной системы об изменениях. Это может потребоваться, если вы редактируете Sass на удаленном диске, где система уведомлений операционной системы не работает.
$ sass --watch --poll themes:public/css
Compiled themes/light.scss to public/css/light.css.
# Then when you edit themes/dark.scss...
Compiled themes/dark.scss to public/css/dark.css.
--stop-on-error
- Dart Sass
- с версии 1.8.0
Этот флаг сообщает Sass остановить компиляцию сразу после обнаружения ошибки, а не пытаться скомпилировать другие файлы Sass, которые могут не содержать ошибок. Он наиболее полезен в режиме «многие-ко-многим» многие-ко-многим.
$ sass --stop-on-error themes:public/css
Error: Expected expression.
╷
42 │ h1 {font-face: }
│ ^
╵
themes/light.scss 42:16 root stylesheet
--interactive
- Dart Sass
- с версии 1.5.0
Этот флаг (сокращённо -i) сообщает Sass запустить его в интерактивном режиме, где вы можете вводить выражения SassScript и видеть их результаты. Интерактивный режим также поддерживает переменные и @use правила.
$ sass --interactive
>> 1px + 1in
97px
>> @use "sass:map"
>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)
>> map.get($map, "width")
100px
--color
Этот флаг (сокращённо -c) сообщает Sass выводить цвета терминала, а обратный флаг --no-color — не выводить цвета. По умолчанию, он будет выводить цвета, если похоже, что он запускается в терминале, поддерживающем цвета.
$ sass --color style.scss style.css
Error: Incompatible units em and px.
╷
1 │ $width: 15px + 2em
│ ^^^^^^^^^^
╵
style.scss 1:9 root stylesheet
$ sass --no-color style.scss style.css
Error: Incompatible units em and px.
╷
1 │ $width: 15px + 2em
│ ^^^^^^^^^^
╵
style.scss 1:9 root stylesheet
--no-unicode
- Dart Sass
- с версии 1.17.0
Этот флаг сообщает Sass выводить только символы ASCII в терминал в качестве части сообщений об ошибках. По умолчанию или если передаётся --unicode, Sass будет выводить не-ASCII символы для этих сообщений. Этот флаг не влияет на вывод CSS.
$ sass --no-unicode style.scss style.css
Error: Incompatible units em and px.
,
1 | $width: 15px + 2em;
| ^^^^^^^^^^
'
test.scss 1:9 root stylesheet
$ sass --unicode style.scss style.css
Error: Incompatible units em and px.
╷
1 │ $width: 15px + 2em;
│ ^^^^^^^^^^
╵
test.scss 1:9 root stylesheet
--verbose
Этот флаг сообщает Sass выводить все предупреждения о устаревших функциях при компиляции. По умолчанию Sass выводит только пять предупреждений для данного типа устаревших функций при использовании устаревших возможностей и скрывает все предупреждения, которые следуют за ними.
$ sass --verbose style.scss style.css
--quiet
Этот флаг (сокращённо -q) сообщает Sass не выводить никаких предупреждений при компиляции. По умолчанию Sass выводит предупреждения при использовании устаревших функций или при обнаружении правила @warn. Он также скрывает правило @debug.
$ sass --quiet style.scss style.css
--quiet-deps
Этот флаг сообщает Sass не выводить предупреждения об устаревших функциях, которые поступают из зависимостей. Он считает любой файл, импортированный транзитивно через путь загрузки, «зависимостью». Этот флаг не влияет на правило @warn или правило @debug.
$ sass --load-path=node_modules --quiet-deps style.scss style.css
--fatal-deprecation
- Dart Sass
- с версии 1.59.0
Этот параметр сообщает Sass рассматривать определённый тип предупреждения об устаревших функциях как ошибку. Например, эта команда сообщает Sass рассматривать предупреждения об устаревших функциях для /-as-division как ошибки:
$ sass --fatal-deprecation=slash-div style.scss style.css
Error: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(4, 2) or calc(4 / 2)
More info and automated migrator: /documentation/breaking-changes/slash-div
This is only an error because you've set the slash-div deprecation to be fatal.
Remove this setting if you need to keep using this feature.
╷
1 │ a { b: (4/2); }
│ ^^^
╵
style.scss 1:9 root stylesheet
Следующие идентификаторы устаревших функций могут быть переданы в этот параметр:
| ID | Устарело в | Описание |
|---|---|---|
call-string |
0.0.0 | Передача строки напрямую в meta.call(). |
elseif |
1.3.2 | @elseif. |
moz-document |
1.7.2 | @-moz-document. |
relative-canonical |
1.14.2 | Импорт с использованием относительных канонических URL-адресов. |
new-global |
1.17.2 | Объявление новых переменных с !global. |
color-module-compat |
1.23.0 | Использование функций модуля цвета вместо обычных функций CSS. |
slash-div |
1.33.0 | Оператор / для деления. |
bogus-combinators |
1.54.0 | Ведущие, хвостовые и повторяющиеся комбинирующие элементы. |
strict-unary |
1.55.0 | Неоднозначные операторы + и -. |
function-units |
1.56.0 | Передача недопустимых единиц измерения встроенным функциям. |
duplicate-var-flags |
1.62.0 | Использование !default или !global несколько раз для одной переменной. |
null-alpha |
1.62.3 | Передача null как alpha в JS API. |
abs-percent |
1.65.0 | Передача процентов в функцию Sass abs(). |
fs-importer-cwd |
1.73.0 | Использование текущей рабочей директории в качестве неявного пути загрузки. |
css-function-mixin |
1.76.0 | Функции и миксины, начинающиеся с –. |
mixed-decls |
1.77.7 | Объявления после или между вложенными правилами. |
feature-exists |
1.78.0 | meta.feature-exists |
color-4-api |
1.79.0 | Определённые использования встроенных функций sass:color. |
color-functions |
1.79.0 | Использование глобальных функций цвета вместо sass:color. |
legacy-js-api |
1.79.0 | Устаревший JS API. |
import |
1.80.0 | Правила @import. |
global-builtin |
1.80.0 | Глобальные встроенные функции, которые доступны в модулях sass:. |
В качестве альтернативы, можно передать версию Dart Sass, чтобы рассматривать все устаревшие функции, присутствующие в этой версии, как ошибки. Например, --fatal-deprecation=1.33.0 будет рассматривать все устаревшие функции в таблице выше, вплоть до и включая slash-div, как ошибки, но оставить все более новые устаревшие функции как предупреждения.
--future-deprecation
- Dart Sass
- с версии 1.59.0
Этот параметр сообщает Sass включить будущее предупреждение об устаревших функциях заранее, выводить предупреждения, даже если устаревшая функция ещё не активна. Этот параметр можно комбинировать с --fatal-deprecation, чтобы выводить ошибки вместо предупреждений для будущих устаревших функций.
$ sass --future-deprecation=import style.scss style.css
Deprecation Warning on line 1, column 9 of style.scss:
Sass @import rules will be deprecated in the future.
Remove the --future-deprecation=import flag to silence this warning for now.
╷
1 │ @import 'dependency';
│ ^^^^^^^^^^^^
╵
В последней версии Dart Sass нет будущих устаревших функций.
--silence-deprecation
- Dart Sass
- с версии 1.74.0
Этот параметр сообщает Sass заглушить определённый тип предупреждения об устаревших функциях, если вы хотите временно игнорировать устаревшую функцию. Любые из устаревших функций, перечисленных в разделе --fatal-deprecation выше, могут быть переданы сюда, хотя передача версии не поддерживается.
$ sass --silence-deprecation=slash-div style.scss style.css
--trace
Этот флаг сообщает Sass выводить полный стек отслеживания ошибок Dart или JavaScript при возникновении ошибки. Он используется командой Sass для отладки ошибок.
$ sass --trace style.scss style.css
Error: Expected expression.
╷
42 │ h1 {font-face: }
│ ^
╵
themes/light.scss 42:16 root stylesheet
package:sass/src/visitor/evaluate.dart 1846:7 _EvaluateVisitor._addExceptionSpan
package:sass/src/visitor/evaluate.dart 1128:12 _EvaluateVisitor.visitBinaryOperationExpression
package:sass/src/ast/sass/expression/binary_operation.dart 39:15 BinaryOperationExpression.accept
package:sass/src/visitor/evaluate.dart 1097:25 _EvaluateVisitor.visitVariableDeclaration
package:sass/src/ast/sass/statement/variable_declaration.dart 50:15 VariableDeclaration.accept
package:sass/src/visitor/evaluate.dart 335:13 _EvaluateVisitor.visitStylesheet
package:sass/src/visitor/evaluate.dart 323:5 _EvaluateVisitor.run
package:sass/src/visitor/evaluate.dart 81:10 evaluate
package:sass/src/executable/compile_stylesheet.dart 59:9 compileStylesheet
package:sass/src/executable.dart 62:15 main
--help
Этот флаг (сокращённо -h) печатает краткое содержание данной документации.
$ sass --help
Compile Sass to CSS.
Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> <input/>:<output/>
...
--version
Этот флаг печатает текущую версию Sass.
$ sass --version
1.85.0
© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/cli/dart-sass
