Sass系列（二）：sass的基本用法

sass的语法格式

sass有两种语法格式：

• sass语法格式（老版本sass语法格式）
• 文件后缀名为.sass
• 通过tab键严格控制缩进的一种语法形式
• 不带{}和;

eg:
$color:#333
body
  font-size:14px
  color:$color

• scss语法格式（新的sass语法格式）
• 文件后缀名为.scss
• 类似于css的书写方式

eg:
$color:#333;
body{
  font-size:14px;
  color:$color;
}

sass编译

sass命令行编译

• 单文件编译：sass input.scss:output.css（将input.scss文件编译为output.css）

• 多文件编译：sass sass:css(将sass目录下所有.scss文件编译到css目录下，生成相应的.css文件)

• 上面的命令，只能进行一次编译，每当你对scss文件修改之后，必须重新执行编译，十分麻烦。在实际开发当中，我们可以使用watch命令对源文件进行监听，每当源文件发生改变，sass会自动进行编译

  // watch a file
  sass --watch input.scss:output.css
  // watch a directory
  sass --watch sass:css

sass图形化工具编译

1. Koala (http://koala-app.com/)
2. Compass.app（http://compass.kkbox.com/）
3. Scout（http://mhs.github.io/scout-app/）
4. CodeKit（https://incident57.com/codekit/index.html）
5. Prepros（https://prepros.io/）

SASS提供四个编译风格的选项：

• nested：嵌套输出方式，它是默认值。(闭合大括号不会另起一行)
• expanded：展开输出方式。(闭合大括号另起一行)
• compact：紧凑输出方式。（大括号和css代码在同一行）
• compressed：压缩输出方式。（压缩格式，常用于生产环境）

// 用法示例：在编译命令后面带上 `-- style *`参数
sass --watch test.scss:test.css --style nested