SASS的知识体系构建

虽然已经在多个项目中使用过sass,但在研究element sass搭建UI框架的源码中，发现很多自己没用过的高级用法，借着这次总结对sass的知识体系进行详细的梳理。

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

1安装编译

1.1 安装

• 安装ruby(mac下自带Ruby无需在安装Ruby!)

  • 官网https://rubyinstaller.org/downloads/中下载 安装包，傻瓜式安装安装完成运行CMD ，输入命令ruby -v，安装成功会打印版本号

  • 删除替换原gem源

  //删除替换原gem源 
  gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
  
  //查看gem源
  gem sources -l
  
  //查看gem安装的内容
  gem list
  
  

• 安装sass与compass

gem install sass
gem install compass

//安装指定版本
gem install sass --version=3.3

//查看安装版本
sass -v
compass -v

1.2 编译

• 命令行编译

//单文件编译;进入scss目录
sass demo.scss demo.css

//监听文件下的scss文件；进入scssTest目录
sass --watch scss:css   //将scss目录中的文件编译为css，存放至css目录

• 命令行指令

--watch   监听文件变化并执行编译
--no-catch 不生成.sass-cache 文件
--sourcemap 添加调试map
--style 选择编译格式 （nested``expanded``compact``compressed）

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

• 软件方式编译

  koala&codekit,它们是优秀的编译器；支持Less、Sass、Compass、CoffeeScript，不做过多说明

• Live Sass编译器

• VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

• webpack 配置

npm install -D sass-loader node-sass style-loader css-loader

module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader'],
        exclude: /node_modules/
      }
    ]
}

1.3 输出格式

• nested 格式

  选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。

• expanded 格式

  Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

• compact 格式

  每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

• compressed 格式

  Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

2 语法格式

2.1 语法格式

• Sass 语法格式，被称为缩进格式 (Indented Sass) ，是一种简化格式；以严格的缩进式语法规则来书写，不带大括号({})和分号
• SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能；和我们的 CSS 语法书写方式非常类似。
• 一般推荐使用scss，语法要求没那么严格

2.2 编码格式

一般使用使用 @charset声明编码格式，没有检测到，默认使用 UTF-8 编码。

2.3 注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

3 sass Script

3.1 变量

3.1.1 变量写法

• 变量以美元符号开头
• scss认为中划线和下划线是完全相等的

$primary : #DABE8D !default;

3.1.2 变量作用域

• 局部变量：定义在选择器之内的变量，使用范围是该选择器与子选择器
• 全局变量：定义在选择器之外的变量，子选择器中也定义了同名变量，则会覆盖全局变量

// 编译前
$width : 200px;
.block{
  $width: 100px;
  #{&}-item{
    width: $width;
  }
}
.block-other{
  width: $width;
}

//编译后 （ .variable采用嵌套作于域内的变量，.variable1使用的外层全局变量）
.block .block-item {
  width: 100px;
}
.block-other {
  width: 200px;
}

• 局部变量转换为全局变量可以添加 !global

// 编译前
.block{
  $width: 100px !global;

  #{&}-item{
    width: $width;
  }
}
.block-other{
  width: $width;
}

// 编译后
.block .block-item {
  width: 100px;
}

.block-other {
  width: 100px;
}

3.1.3 变量定义，设置变量的默认值 !default

变量的结尾添加 !default可指定默认值，此时，如果变量已经被赋值，不会再被重新赋值，如果变量未被赋值，则会被赋予新的值。

• 变量已赋值

// 编译前
$primary-dark : pink;
$primary-dark : red  !default;
.block{
  color: $primary-dark;
}

// 编译后 （变量值还是前面声明的值）
.block {
  color: pink;
}

• 变量未被赋值

// 编译前
$primary-dark : null;
$primary-dark : red  !default;
.block{
  color: $primary-dark;
}
// 编译后  （变量值为后面新赋予的值）
.block {
  color: red;
}

3.2 数据类型

• 数值（1, 2, 13, 10px）
• 字符串，有引号字符串与无引号字符串（“foo”, ‘bar’, baz）
• 颜色（blue, #04a3f9, rgba(255,0,0,0.5)）
• 布尔型（true, false）
• 空值（null）
• 数组 (list)，用空格或逗号作分隔符（1.5em 1em 0 2em, Helvetica, Arial, sans-serif）
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

3.3 运算

注意 ：

• 加、减、乘、除都必须是同一单位下运算，不然会报错。
• 减法左边不留空格，直接做拼接，为了避免相关问题,运算符的两边都预留空格
• 多个值单位相同时，只需要为一个值提供单位即可。
• 圆括号可以用来影响运算的顺序
• #{} 可以避免 Sass 运行运算表达式，直接编译 CSS

3.3.1 数值运算