Sass入门（一）

1.CSS预处理器

CSS预处理器定义了一种新的语言，其基本的思想是，用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者只要使用这种语言进行编码工作

CSS的预处理器包括：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

2. Sass的定义

Sass 官网上的描述：Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

Sass是采用Ruby语言（第一次见到这个Ruby还是在CSDN的Markdown提示中）编写的一款CSS预处理器

3. Sass和SCSS的区别

Sass和SCSS其实是一种东西，我们平时都称为Sass，两者之前不同之处有以下几点：

• 文件扩展名不同，Sass是以“.sass”后缀为扩展名，SCSS是以“.scss”后缀为扩展名
• 语法书写方式不同，Sass是以严格的缩进式语法规则来书写，不带大括号（{}）和分号（;），而SCSS的语法书写和CSS的语法书写方式非常类似

Sass语法：

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

4. Sass语法格式

Sass语法是Sass最初语法格式，它是通过tab键控制缩进的一种语法该规则，而且这种缩进要求非常严格，另外不带有任何的分号和大括号，常常把这种格式称为Sass老版本，其文件名以“.sass”为扩展名。

“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）

5. Sass编译

• 命令编译

  单文件编译：

  sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

  多文件编译：将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中

  sass sass/:css/

  编译Sass时，开启“watch”功能，这样只要代码进行修改，就能监测到变化，并且直接编译处理

  sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

• GUI工具编译

  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/）

• 自动化编译

  通过Grunt 和 Gulp 来配置 Sass 的编译

6. Sass中常见的编译错误

• 字符的编码：在Sass的编译过程中是不支持”GBK”编码的，所以在创建Sass文件时，就需要将文件编码设置为“utf-8”
• 路径的中文字符：在项目文件命名或者文件目录命名的时候最好不使用中文字符，以至于人为失误造成编译失败

7. 不同风格的输出方式

• 嵌套输出方式 nested
• 展开输出方式 expanded
• 紧凑输出方式 compact
• 压缩输出方式 compressed

nav {
    ul {
        margin : 0;
        padding : 0;
        list-style : none;
    }

    li {
        display: inline-block;
    }

    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

编译：sass –watch test.scss:test.css –style nested

nav ul {
  margin: 0;