Интерфейс командной строки 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 разбирать входной файл, используя синтаксис с отступами. Если он используется в режиме «многие ко многим», все входные файлы разбираются с использованием синтаксиса с отступами, хотя синтаксис файлов, которые они подключают с помощью use, определяется обычным способом. Обратный флаг, --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 использует абсолютные URL file: исходных файлов 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 в качестве альфа-канала в JS API.
`abs-percent`	1.65.0	Передача процентов функции Sass abs().
`fs-importer-cwd`	1.73.0	Использование текущего рабочего каталога в качестве неявного пути загрузки.
`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:.
`compile-string-relative-url`	1.88.0	Передача относительного URL в compileString().
`misplaced-rest`	1.91.0	Параметр с остаточными аргументами перед позиционным или именованным параметром.
`with-private`	1.92.0	Настройка приватных переменных в @use, @forward или load-css().
`if-function`	1.95.0	Функция Sass if($condition, $if-true, $if-false).
`function-name`	1.98.0	Зарезервированные имена функций в верхнем регистре.
`adjacent-compounds`	1.100.0	Составные селекторы без пробела, например `[class]a`.

Вместо этого можно передать версию Dart Sass, чтобы считать ошибками все устаревания, существовавшие в этой версии. Например, --fatal-deprecation=1.33.0 будет считать ошибками все устаревания из таблицы выше вплоть до slash-div включительно, а более новые устаревания останутся предупреждениями.

Следующие идентификаторы устареваний устарели и больше не действуют:

ID	Устарело начиная с	Утратило силу начиная с	Описание
`css-function-mixin`	1.76.0	1.94.0	Имена функций и примесей, начинающиеся с –.
`mixed-decls`	1.77.7	1.92.0	Объявления после или между вложенными правилами.
`type-function`	1.86.0	1.92.0	Функции с именем «type».

`--future-deprecation`

Dart Sass: начиная с 1.59.0

Этот параметр позволяет заранее включить будущий тип предупреждений об устаревании, выводя предупреждения, даже если устаревание ещё не вступило в силу. Этот параметр можно сочетать с --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

Этот параметр позволяет подавить предупреждения об определённом типе устаревания, если вы хотите временно его игнорировать. Здесь можно указать любое устаревание из раздела --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.104.0

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/cli/dart-sass