Интерфейс командной строки Dart Sass

Применение permalinkПрименение

Исполняемый файл Dart Sass можно запускать в одном из двух режимов.

Режим “один к одному” permalinkРежим “один к одному”

sass <input.scss> [output.css]

В режиме «один к одному» один входной файл (input.scss) компилируется в единственное место вывода (output.css). Если расположение вывода не передано, скомпилированный CSS выводится на терминал.

Входной файл анализируется как SCSS, если его расширение - .scss, как синтаксис с отступом, если его расширение - .sass, или как простой CSS, если его расширение - .css. Если у него нет одного из этих трех расширений или если он поступает со стандартного ввода, по умолчанию он анализируется как SCSS. Это можно контролировать с помощью флага --indented.

Специальная строка - может быть передана вместо входного файла, чтобы сообщить Sass о необходимости чтения входного файла из стандартного ввода. Sass по умолчанию будет анализировать его как SCSS, если не передан флаг --indented.

Режим “многие ко многим” permalinkРежим “многие ко многим”

Dart Sass: since 1.4.0

sass [<input.css>:<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 игнорирует частичные файлы, имена которых начинаются с _. Вы можете использовать партиалы для разделения таблиц стилей без создания кучи ненужных выходных файлов.

Опции permalinkОпции

Ввод и Вывод permalinkВвод и Вывод

Эти параметры управляют тем, как Sass загружает свои входные файлы и как создает выходные файлы.

–stdin permalink`--stdin`

Этот флаг - альтернативный способ сообщить Sass, что он должен прочитать свой входной файл из стандартного ввода. Когда он передан, входной файл не может быть передан.

$ echo "h1 {font-size: 40px}" | sass --stdin h1.css
$ echo "h1 {font-size: 40px}" | sass --stdin
h1 {
  font-size: 40px;
}

Флаг --stdin нельзя использовать с режимом многие-ко-многим.

–indented permalink`--indented`

Этот флаг сообщает Sass, что нужно проанализировать входной файл как синтаксис с отступом. Если он используется в режиме многие-ко-многим, все входные файлы анализируются с использованием синтаксиса с отступом, хотя для файлов, которые они используют синтаксис определяется как обычно. Обратное значение, --no-indented, может использоваться для принудительного анализа всех входных файлов как SCSS.

Флаг --indented в основном полезен, когда входной файл поступает из стандартного ввода, поэтому его синтаксис не может быть определен автоматически.

$ echo -e 'h1\n  font-size: 40px' | sass --indented -
h1 {
  font-size: 40px;
}

–load-path permalink`--load-path`

Этот параметр (сокращенно -I) добавляет дополнительный путь загрузки для Sass для поиска таблиц стилей. Его можно передавать несколько раз, чтобы обеспечить несколько путей загрузки. Более ранние пути загрузки имеют приоритет над более поздними.

$ sass --load-path=node_modules/bootstrap/dist/css style.scss style.css

–style permalink`--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 permalink`--no-charset`

Dart Sass: since 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 permalink`--error-css`

Dart Sass: since 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 permalink`--update`

Dart Sass: since 1.4.0

Если передан флаг --update, Sass будет компилировать только таблицы стилей, зависимости которых были изменены позже, чем был сгенерирован соответствующий файл CSS. Он также будет печатать сообщения о состоянии при обновлении таблиц стилей.

$ sass --update themes:public/css
Compiled themes/light.scss to public/css/light.css.

Исходные карты permalinkИсходные карты

Dart Sass: since 1.3.0

Исходные карты - это файлы, которые сообщают браузерам или другим инструментам, использующим CSS, как этот CSS соответствует файлам Sass, из которых он был сгенерирован. Они позволяют просматривать и даже редактировать ваши файлы Sass в браузерах. Смотрите инструкции по использованию исходных карт в Chrome и Firefox.

Dart Sass по умолчанию генерирует исходные карты для каждого создаваемого файла CSS.

–no-source-map permalink`--no-source-map`

Если передан флаг --no-source-map, Sass не будет генерировать исходные карты. Его нельзя передавать вместе с другими параметрами исходной карты.

$ sass --no-source-map style.scss style.css

–source-map-urls permalink`--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 permalink`--embed-sources`

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

$ sass --embed-sources sass/style.scss css.style.css

–embed-source-map permalink`--embed-source-map`

Этот флаг сообщает Sass о необходимости встраивания содержимого файла исходной карты в сгенерированный CSS, а не создания отдельного файла и ссылки на него из CSS.

$ sass --embed-source-map sass/style.scss css.style.css

Другие опции permalinkДругие опции

–watch permalink`--watch`

Dart Sass: since 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 permalink`--poll`

Dart Sass: since 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 permalink`--stop-on-error`

Dart Sass: since 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 permalink`--interactive`

Dart Sass: since 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 permalink`--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 permalink`--no-unicode`

Dart Sass: since 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

–quiet permalink`--quiet`

Этот флаг (сокращенно -q) указывает Sass не выдавать никаких предупреждений при компиляции. По умолчанию Sass выдает предупреждения при использовании устаревших функций или при обнаружении правила @warn. Он также отключает правило @debug.

$ sass --quiet style.scss style.css

–quiet-deps permalink`--quiet-deps`

Этот флаг указывает Sass не выдавать предупреждения об устаревании, исходящие от зависимостей. Он рассматривает любой файл, который транзитивно импортирован через путь загрузки, как «зависимость». Этот флаг не влияет на правило @warn или правило @debug.

$ sass --load-path=node_modules --quiet-deps style.scss style.css

–trace permalink`--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 permalink`--help`

Этот флаг (сокращенно -h) печатает краткое изложение этой документации.

$ sass --help
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

...

–version permalink`--version`

Этот флаг печатает текущую версию Sass.

$ sass --version
1.49.0

Интерфейс командной строки Dart Sass

Применение permalinkПрименение

Режим “один к одному” permalinkРежим “один к одному”

Режим “многие ко многим” permalinkРежим “многие ко многим”

Опции permalinkОпции

Ввод и Вывод permalinkВвод и Вывод

–stdin permalink--stdin

–indented permalink--indented

–load-path permalink--load-path

–style permalink--style

–no-charset permalink--no-charset

–error-css permalink--error-css

–update permalink--update

Исходные карты permalinkИсходные карты

–no-source-map permalink--no-source-map

–source-map-urls permalink--source-map-urls

–embed-sources permalink--embed-sources

–embed-source-map permalink--embed-source-map

Другие опции permalinkДругие опции

–watch permalink--watch

–poll permalink--poll

–stop-on-error permalink--stop-on-error

–interactive permalink--interactive

–color permalink--color

–no-unicode permalink--no-unicode

–quiet permalink--quiet

–quiet-deps permalink--quiet-deps

–trace permalink--trace

–help permalink--help

–version permalink--version