笔记

Appearance

大纲

快速开始 ​

sass 是一种 css 预编译语言，在 css 语法的基础上扩展了 导入、变量、嵌套、混合、函数等高级功能，以更好的组织管理样式文件

语法格式 ​

sass 提供两种语法格式，其扩展名对应为 .sass 和 .scss，这两种格式可以相互导入，也可以通过 sass-convert 进行相互转换

  • .sass: 最初的语法格式，通过缩进代替花括号，通过换行代替分号
  • .scss: 是在 css 语法上进行扩展，将 sass 的语法扩展到 css 中

输出格式 ​

sass 最终会编译为 css ，指定 --output-style 选项设置输出格式，支持以下选项

  • nested: 默认选项，尾括号不换行
  • expanded: 选择器、属性、尾括号换行，类似于手写格式
  • compact: 每条规则压缩至单行，嵌套的选择器输出时无空行
  • compressed: 完全的压缩

安装使用 ​

sass 可以作为命令行工具、独立的模块、框架插件使用。

sass 依赖于 ruby 环境，可以使用 node-sass 避免安装 ruby。

详细的使用可以查看 node-sass 文档

shell
npm i node-sass --save-dev

作为命令行工具 ​

使用语法

shell
node-sass [options] <input> [output]

选项说明

shell
-w, --watch                Watch a directory or file
-r, --recursive            Recursively watch directories or files
-o, --output               Output directory
-x, --omit-source-map-url  Omit source map URL comment from output
-i, --indented-syntax      Treat data from stdin as sass code (versus scss)
-q, --quiet                Suppress log output except on error
-v, --version              Prints version info
--output-style             CSS output style (nested | expanded | compact | compressed)
--indent-type              Indent type for output CSS (space | tab)
--indent-width             Indent width; number of spaces or tabs (maximum value: 10)
--linefeed                 Linefeed style (cr | crlf | lf | lfcr)
--source-comments          Include debug info in output
--source-map               Emit source map
--source-map-contents      Embed include contents in map
--source-map-embed         Embed sourceMappingUrl as data URI
--source-map-root          Base path, will be emitted in source-map as is
--include-path             Path to look for imported files
--follow                   Follow symlinked directories
--precision                The amount of precision allowed in decimal numbers
--error-bell               Output a bell character on errors
--importer                 Path to .js file containing custom importer
--functions                Path to .js file containing custom functions
--help                     Print usage info

常用命令

  • sass src.sass dist.css: 编译 src.sass 文件为 dist.css 文件
  • sass --watch src.sass dist.css: 实时编译
  • sass --watch -r src/ -o dist/: 监视整个文件夹(-r 指定源文件夹 -o 指定输出文件夹)

配置为 npm script

json
// package.json
"scripts": {
    "sass": "node-sass ./src/index.sass ./dist/index.css",
    "sass-test": "node-sass --watch ./src/index.sass ./dist/index.css",
    "sass-watch": "node-sass --watch -r ./src -o ./dist --output-style expanded"
}

作为模块使用 ​

简单示例

js
const sass = require("node-sass");
const fs = require("fs");

const srcPath = "./src/index.sass";
const distPath = "./dist/index.css";

const result = sass.renderSync({
  file: srcPath,
  outputStyle: "expanded",
});

fs.writeFileSync(distPath, result.css);

在 webpack 中使用 ​

安装依赖

shell
npm i --save-dev node-sass
npm i --save-dev style-loader css-loader sass-loader

配置规则

js
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

迁移到 dart-sass ​

2019.11.1 sass 使用 dart 重写了 sass

shell
npm i sass --save-dev
js
var sass = require("sass");
sass.render({ file: scss_filename }, function (err, result) {
  /* ... */
});
// OR
var result = sass.renderSync({ file: scss_filename });

webpack 配置

js
{
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        // 优先选用`dart-sass`
        implementation: require('sass'),
      },
    },
  ]
}