Ruby Sass 命令行接口

⚠️ Heads up!

Ruby Sass 已达到生命终点 现在完全无人维护。请你尽早切换至 Dart SassLibSass

¥Ruby Sass has reached end of life and is now totally unmaintained. Please switch to Dart Sass or LibSass at your earliest convenience.

用法用法 permalink

¥Usage

Ruby Sass 可执行文件可以通过两种模式之一调用。

¥The Ruby Sass executable can be invoked in one of two modes.

一对一模式一对一模式 permalink

¥One-to-One Mode

sass [input.scss] [output.css]

一对一模式将单个输入文件 (input.scss) 编译到单个输出位置 (output.css)。如果未传递输出位置,则编译后的 CSS 将打印到终端。如果没有传递任何输入或输出,则从 标准输入 读取 CSS 并打印到终端。

¥One-to-one mode compiles a single input file (input.scss) to a single output location (output.css). If no output location is passed, the compiled CSS is printed to the terminal. If no input or output is passed, the CSS is read from standard input and printed to the terminal.

如果输入文件的扩展名是 .scss,则将其解析为 SCSS;如果其扩展名是 .sass,则将其解析为 缩进语法。如果它没有这两个扩展之一,或者它来自标准输入,则默认情况下会将其解析为缩进语法。这可以通过 --scss 标志 进行控制。

¥The input file is parsed as SCSS if its extension is .scss or as the indented syntax if its extension is .sass. If it doesn’t have one of these two extensions, or if it comes from standard input, it’s parsed as the indented syntax by default. This can be controlled with the --scss flag.

多对多模式多对多模式 permalink

¥Many-to-Many Mode

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

多对多模式将一个或多个输入文件编译为一个或多个输出文件。输入与输出用冒号分隔。它还可以将一个目录中的所有 Sass 文件编译为另一个目录中同名的 CSS 文件。当任何参数包含冒号或传递 --update 标志--watch 标志 时,将启用多对多模式。

¥Many-to-many mode compiles one or more input files to one or more output files. The inputs are separated from the outputs with colons. It can also compile all Sass files in a directory to CSS files with the same names in another directory. Many-to-many mode is enabled when any argument contains a colon, or when the --update flag or the --watch flag is passed.

如果传递的输入文件没有相应的输出文件,则会将其编译为以输入文件命名的 CSS 文件,但扩展名替换为 .css。如果传递的输入目录没有相应的输出目录,则其中的所有 Sass 文件都会编译为同一目录中的 CSS 文件。

¥If an input file is passed without a corresponding output file, it’s compiled to a CSS file named after the input file, but with the extension replaced with .css. If an input directory is passed without a corresponding output directory, all the Sass files within it are compiled to CSS files in the same directory.

$ sass style.scss:style.css
      write style.css
      write style.css.map
$ sass light.scss:light.css dark.scss:dark.css
      write light.css
      write light.css.map
      write dark.css
      write dark.css.map
$ sass themes:public/css
      write public/css/light.css
      write public/css/light.css.map
      write public/css/dark.css
      write public/css/dark.css.map

当编译整个目录时,Sass 将忽略名称以 _ 开头的 部分文件。你可以使用部分来分离样式表,而无需创建一堆不必要的输出文件。

¥When compiling whole directories, Sass will ignore partial files whose names begin with _. You can use partials to separate out your stylesheets without creating a bunch of unnecessary output files.

多对多模式只会编译其依赖修改时间晚于相应 CSS 文件生成时间的样式表。更新样式表时它还会打印状态消息。

¥Many-to-many mode will only compile stylesheets whose dependencies have been modified more recently than the corresponding CSS file was generated. It will also print status messages when updating stylesheets.

选项选项 permalink

¥Options

常见的常见的 permalink

¥Common

--load-path–load-path permalink

此选项(缩写为 -I)为 Sass 添加了一个额外的 加载路径 来查找样式表。它可以被多次传递以提供多个加载路径。较早的加载路径将优先于较晚的加载路径。

¥This option (abbreviated -I) adds an additional load path for Sass to look for stylesheets. It can be passed multiple times to provide multiple load paths. Earlier load paths will take precedence over later ones.

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

如果已设置,加载路径也会从 SASS_PATH 环境变量 加载。该变量应该是由 ;(在 Windows 上)或 :(在其他操作系统上)分隔的路径列表。SASS_PATH 上的加载路径优先于命令行上传递的加载路径。

¥Load paths are also loaded from the SASS_PATH environment variable, if it’s set. This variable should be a list of paths separated by ; (on Windows) or : (on other operating systems). Load paths on SASS_PATH take precedence over load paths passed on the command line.

$ SASS_PATH=node_modules/bootstrap/dist/css sass style.scss style.css

--require–require permalink

该选项(缩写为 -r)在运行 Sass 之前加载 Ruby gem。它可用于将 Ruby 中定义的函数加载到 Sass 环境中。

¥This option (abbreviated -r) loads a Ruby gem before running Sass. It can be used to load functions defined in Ruby into your Sass environment.

$ sass --require=rails-sass-images style.scss style.css

--compass–compass permalink

该标志加载 指南针框架 并使其 mixin 和函数可在 Sass 中使用。

¥This flag loads the Compass framework and makes its mixins and functions available for use in Sass.

$ sass --compass style.scss style.css

--style–style permalink

此选项(缩写为 -t)控制生成的 CSS 的输出样式。Ruby Sass 支持四种输出样式:

¥This option (abbreviated -t) controls the output style of the resulting CSS. Ruby Sass supports four output styles:

  • nested(默认值)缩进 CSS 规则以匹配 Sass 源的嵌套。

    ¥nested (the default) indents CSS rules to match the nesting of the Sass source.

  • expanded 将每个选择器和声明写在自己的行上。

    ¥expanded writes each selector and declaration on its own line.

  • compact 将每个 CSS 规则放在自己的单行上。

    ¥compact puts each CSS rule on its own single line.

  • compressed 删除尽可能多的额外字符,并将整个样式表写在一行上。

    ¥compressed removes as many extra characters as possible, and writes the entire stylesheet on a single line.

$ sass --style=nested
h1 {
  font-size: 40px; }
  h1 code {
    font-face: Roboto Mono; }

$ sass --style=expanded style.scss
h1 {
  font-size: 40px;
}
h1 code {
  font-face: Roboto Mono;
}

$ sass --style=compact style.scss
h1 { font-size: 40px; }
h1 code { font-face: Roboto Mono; }

$ sass --style=compressed style.scss
h1{font-size:40px}h1 code{font-face:Roboto Mono}

--help–help permalink

该标志(缩写为 -h-?)打印本文档的摘要。

¥This flag (abbreviated -h and -?) prints a summary of this documentation.

$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

...

--version–version permalink

该标志打印 Sass 的当前版本。

¥This flag prints the current version of Sass.

$ sass --version
Sass 3.7.4

监视和更新监视和更新 permalink

¥Watching and Updating

这些选项影响 多对多模式

¥These options affect many-to-many mode.

--watch–watch permalink

启用 多对多模式,并使 Sass 保持打开状态,并在样式表或其依赖发生变化时继续编译样式表。

¥Enables many-to-many mode, and causes Sass to stay open and continue compiling stylesheets whenever they or their dependencies change.

$ sass --watch themes:public/css
      write public/css/light.css
      write public/css/light.css.map

​# Then when you edit themes/dark.scss...
      write public/css/dark.css
      write public/css/dark.css.map

--poll–poll permalink

该标志只能与 --watch 一起传递,告诉 Sass 经常手动检查源文件的更改,而不是依赖操作系统在发生更改时通知它。如果你在远程驱动器上编辑 Sass,而操作系统的通知系统无法正常工作,则这可能是必要的。

¥This flag, which may only be passed along with --watch, tells Sass to manually check for changes to the source files every so often instead of relying on the operating system to notify it when something changes. This may be necessary if you’re editing Sass on a remote drive where the operating system’s notification system doesn’t work.

$ sass --watch --poll themes:public/css
      write public/css/light.css
      write public/css/light.css.map

​# Then when you edit themes/dark.scss...
      write public/css/dark.css
      write public/css/dark.css.map

--update–update permalink

即使没有任何参数都是以冒号分隔的对,此标志也会启用 多对多模式

¥This flag enables many-to-many mode, even if none of the arguments are colon-separated pairs.

$ sass --update style.scss
      write style.css
      write style.css.map

--force–force permalink

该标志(缩写为 -f)只能在 多对多模式 中传递。它导致 Sass 文件始终编译为 CSS 文件,而不是仅在源文件比输出更新时才进行编译。

¥This flag (abbreviated -f) may only be passed in many-to-many mode. It causes Sass files to always be compiled to CSS files, instead of only being compiled when the source files are more up-to-date than the output.

--force 标志不得与 --watch 标志 一起传递。

¥The --force flag may not be passed alongside the --watch flag.

$ sass --force style.scss:style.css
      write style.css
      write style.css.map

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

该标志只能在 多对多模式 中传递。它告诉 Sass 在检测到错误时立即停止编译,而不是尝试编译其他可能不包含错误的 Sass 文件。

¥This flag may only be passed in many-to-many mode. It tells Sass to stop compiling immediately when an error is detected, rather than trying to compile other Sass files that may not contain errors.

$ sass --stop-on-error themes:public/css
Error: Invalid CSS after "h1 {font-size: ": expected expression (e.g. 1px, bold), was "}"
        on line 1 of test.scss
  Use --trace for backtrace.

输入输出输入输出 permalink

¥Input and Output

这些选项控制 Sass 如何加载其输入文件以及如何生成输出文件。

¥These options control how Sass loads its input files and how it produces output files.

--scss–scss permalink

该标志告诉 Sass 将 标准输入 解析为 SCSS

¥This flag tells Sass to parse standard input as SCSS.

$ echo "h1 {font-size: 40px}" | sass --scss
h1 {
  font-size: 40px;
}

--sourcemap–sourcemap permalink

此选项控制 Sass 如何生成源映射,源映射是告诉浏览器或使用 CSS 的其他工具该 CSS 如何与生成它的 Sass 文件相对应的文件。它们使你可以在浏览器中查看甚至编辑 Sass 文件。请参阅 Chrome火狐浏览器 中有关使用源映射的说明。它有四个可能的值:

¥This option controls how Sass generates source maps, which are files that tell browsers or other tools that consume CSS how that CSS corresponds to the Sass files from which it was generated. They make it possible to see and even edit your Sass files in browsers. See instructions for using source maps in Chrome and Firefox. It has four possible values:

  • auto(默认)在可能的情况下使用相对 URL 从源映射链接到 Sass 样式表,否则使用绝对 file: 网址

    ¥auto (the default) uses relative URLs to link from the source map to the Sass stylesheets where possible, and absolute file: URLs otherwise.

  • file 始终使用绝对 file: URL 从源映射链接到 Sass 样式表。

    ¥file always uses absolute absolute file: URLs to link from the source map to the Sass stylesheets.

  • inline 直接在源映射中包含 Sass stylehseets 的文本。

    ¥inline includes the text of the Sass stylehseets in the source map directly.

  • none 根本不生成源映射。

    ¥none doesn’t generate source maps at all.

​# Generates a URL like "../sass/style.scss".
$ sass --sourcemap=auto sass/style.scss css/style.css

​# Generates a URL like "file:///home/style-wiz/sassy-app/sass/style.scss".
$ sass --sourcemap=file sass/style.scss css/style.css

​# Includes the full text of sass/style.scss in the source map.
$ sass --sourcemap=inline sass/style.scss css/style.css

​# Doesn't generate a source map.
$ sass --sourcemap=none sass/style.scss css/style.css

--stdin–stdin permalink

该标志(缩写为 -s)告诉 Sass 从 标准输入 读取其输入文件。当它通过时,不能传递任何输入文件。

¥This flag (abbreviated -s) is tells Sass to read its input file from standard input. When it’s passed, no input file may be passed.

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

--stdin 标志不能与 多对多模式 一起使用。

¥The --stdin flag may not be used with many-to-many mode.

--default-encoding–default-encoding permalink

此选项(缩写为 -E)控制 Sass 将用于加载不使用 明确指定 字符编码的源文件的默认 字符编码。它默认为操作系统的默认编码。

¥This option (abbreviated -E) controls the default character encoding that Sass will use to load source files that don’t explicitly specify a character encoding. It defaults to the operating system’s default encoding.

$ sass --default-encoding=Shift-JIS style.scss style.css

--unix-newlines–unix-newlines permalink

此标志告诉 Sass 生成其行以 U+000A 换行符分隔的输出文件,这与操作系统默认值相反(在 Windows 上,这是 U+000D 回车后跟 U+000A 换行符)。在默认使用 Unix 样式换行符的系统上总是如此。

¥This flag tells Sass to generate output files with whose lines are separated with the U+000A LINE FEED character, as opposed to the operating system default (on Windows, this is U+000D CARRIAGE RETURN followed by U+000A LINE FEED). It’s always true on systems that default to Unix-style newlines.

$ sass --unix-newlines style.scss style.css

--debug-info–debug-info permalink

此标志(缩写为 -g)使 Sass 发出虚拟 @media 查询,指示每个样式规则在源 stylehseet 中的定义位置。

¥This flag (abbreviated -g) causes Sass to emit dummy @media queries that indicate where each style rule was defined in the source stylehseet.

⚠️ Heads up!

该标志的存在只是为了向后兼容。源映射现在是将 CSS 映射回生成它的 Sass 的推荐方法。

¥This flag only exists for backwards-compatibility. Source maps are now the recommended way of mapping CSS back to the Sass that generated it.

$ sass --debug-info style.scss
@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/style-wiz\/sassy-app\/style\.scss}line{font-family:\000031}}
h1 {
  font-size: 40px; }

--line-comments–line-comments permalink

此标志(也可用作 --line-numbers,缩写为 -l)使 Sass 为每个样式规则发出注释,指示每个样式规则在源样式表中的定义位置。

¥This flag (also available as --line-numbers, abbreviated as -l) causes Sass to emit comments for every style rule that indicate where each style rule was defined in the source stylesheet.

$ sass --line-numbers style.scss
/* line 1, style.scss */
h1 {
  font-size: 40px; }

其他选项其他选项 permalink

¥Other Options

--interactive–interactive permalink

该标志(缩写为 -i)告诉 Sass 以交互模式运行,你可以在其中编写 SassScript 表达式 并查看其结果。交互模式也支持 变量

¥This flag (abbreviated -i) tells Sass to run in interactive mode, where you can write SassScript expressions and see their results. Interactive mode also supports variables.

$ sass --interactive
>> 1px + 1in
97px
>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)
>> map-get($map, "width")
100px

--check–check permalink

此标志(缩写为 -c)告诉 Sass 验证其输入文件的语法是否有效,而不执行该文件。如果语法有效,则以 地位 0 退出。不能在 多对多模式 中使用。

¥This flag (abbreviated -c) tells Sass to verify that the syntax of its input file is valid without executing that file. If the syntax is valid, it exits with status 0. It can’t be used in many-to-many mode.

$ sass --check style.scss

--precision–precision permalink

此选项告诉 Sass 在发出十进制数时要使用 精确 的多少位数字。

¥This option tells Sass how many digits of precision to use when emitting decimal numbers.

$ echo -e 'h1\n  font-size: (100px / 3)' | sass --precision=20
h1 {
  font-size: 33.333333333333336px; }

--cache-location–cache-location permalink

此选项告诉 Sass 在哪里存储已解析文件的缓存,以便它在将来的调用中可以运行得更快。默认为 .sass-cache

¥This option tells Sass where to store its cache of parsed files, so it can run faster in future invocations. It defaults to .sass-cache.

$ sass --cache-location=/tmp/sass-cache style.scss style.css

--no-cache–no-cache permalink

该标志(缩写为 -C)告诉 Sass 根本不缓存已解析的文件。

¥This flag (abbreviated -C) tells Sass not to cache parsed files at all.

$ sass --no-cache style.scss style.css

--trace–trace permalink

该标志告诉 Sass 在遇到错误时打印完整的 Ruby 堆栈跟踪。Sass 团队使用它来调试错误。

¥This flag tells Sass to print the full Ruby stack trace when an error is encountered. It’s used by the Sass team for debugging errors.

Traceback (most recent call last):
        25: from /usr/share/gems/sass/bin/sass:13:in `<main>'
        24: from /usr/share/gems/sass/lib/sass/exec/base.rb:18:in `parse!'
        23: from /usr/share/gems/sass/lib/sass/exec/base.rb:50:in `parse'
        22: from /usr/share/gems/sass/lib/sass/exec/sass_scss.rb:63:in `process_result'
        21: from /usr/share/gems/sass/lib/sass/exec/sass_scss.rb:396:in `run'
        20: from /usr/share/gems/sass/lib/sass/engine.rb:290:in `render'
        19: from /usr/share/gems/sass/lib/sass/engine.rb:414:in `_to_tree'
        18: from /usr/share/gems/sass/lib/sass/scss/parser.rb:41:in `parse'
        17: from /usr/share/gems/sass/lib/sass/scss/parser.rb:137:in `stylesheet'
        16: from /usr/share/gems/sass/lib/sass/scss/parser.rb:697:in `block_contents'
        15: from /usr/share/gems/sass/lib/sass/scss/parser.rb:707:in `block_child'
        14: from /usr/share/gems/sass/lib/sass/scss/parser.rb:681:in `ruleset'
        13: from /usr/share/gems/sass/lib/sass/scss/parser.rb:689:in `block'
        12: from /usr/share/gems/sass/lib/sass/scss/parser.rb:697:in `block_contents'
        11: from /usr/share/gems/sass/lib/sass/scss/parser.rb:708:in `block_child'
        10: from /usr/share/gems/sass/lib/sass/scss/parser.rb:743:in `declaration_or_ruleset'
         9: from /usr/share/gems/sass/lib/sass/scss/parser.rb:820:in `try_declaration'
         8: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1281:in `rethrow'
         7: from /usr/share/gems/sass/lib/sass/scss/parser.rb:807:in `block in try_declaration'
         6: from /usr/share/gems/sass/lib/sass/scss/parser.rb:999:in `value!'
         5: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1161:in `sass_script'
         4: from /usr/share/gems/sass/lib/sass/script/parser.rb:68:in `parse'
         3: from /usr/share/gems/sass/lib/sass/script/parser.rb:855:in `assert_expr'
         2: from /usr/share/gems/sass/lib/sass/script/lexer.rb:240:in `expected!'
         1: from /usr/share/gems/sass/lib/sass/scss/parser.rb:1305:in `expected'
test.scss:1: Invalid CSS after "h1 {font-size: ": expected expression (e.g. 1px, bold), was "}" (Sass::SyntaxError)

--quiet–quiet permalink

该标志(缩写为 -q)告诉 Sass 在编译时不要发出任何警告。默认情况下,当使用已弃用的功能或遇到 @warn 规则 时,Sass 会发出警告。它还会使 @debug 规则 静音。

¥This flag (abbreviated -q) tells Sass not to emit any warnings when compiling. By default, Sass emits warnings when deprecated features are used or when the @warn rule is encountered. It also silences the @debug rule.

$ sass --quiet style.scss style.css