Sass相关介绍及使用

一、CSS预处理器出现的原因

1. 无法嵌套书写导致代码繁重、冗杂、逻辑混乱。
2. 没有变量和样式复用机制，属性值只能以字面量的形式重复输出。

# 总结：代码复用性低；不易于维护
# 注：现在，现在的CSS是可以定义变量的！！！
复制代码

:root{
    --red: #f3e1e1;
}
复制代码

二、出名的CSS预处理器介绍

1. SCSS/SASS

SASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。

2. LESS

LESS (.less)。于2009年诞生，借鉴了SASS的长处，并兼容了CSS语法，使得开发者使用起来更为方便顺手，但是相比于SASS，其编程功能不够丰富，反而促使SASS进化成为了SCSS。

3. Stylus

Stylus (.styl)。于2010年诞生，出自Node.js社区，主要用来给Node项目进行CSS预处理支持，人气较前两者偏低。

三、SCSS和SASS之间的关系

简而言之:可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号

Sass有两套语法：

1.第一种或更新的语法被称为SCSS。它是CSS语法的扩展。这意味着每个有效的CSS样式表都是具有相同含义的有效SCSS文件。下文描述的Sass功能增强了此语法。使用此语法的文件扩展名为.scss。

2.第二种或更旧的语法被称为SASS。提供了一种更为简洁的CSS编写方式。它使用缩进而不是方括号来表示选择器的嵌套，并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为.sass。

任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式
复制代码

四、使用CSS预处理器的优劣

1.优点

CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。支持嵌套、变量和逻辑等。可以让CSS更加简洁、提高代码复用性、逻辑分明等等
复制代码

2.缺点

css的文件体积和复杂度不可控；增加了调试难度和成本等。
复制代码

五、选择SCSS的原因

1. 官方介绍

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

2. 特色功能

   • 完全兼容 CSS3
   • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
   • 通过函数进行颜色值与属性值的运算
   • 提供控制指令 (control directives)等高级功能
   • 自定义输出格式

六、SCSS的环境配置

本人使用的是不依赖编辑器的的安装方式node-sass
复制代码

1. 安装方式

1. 安装node  https://nodejs.org(官网) 或 https://npm.taobao.org/mirrors/node(镜像)
2. *安装cnpm(不推荐直接将源换为淘宝镜像!!) $npm i -g cnpm --registry=https://registry.npm.taobao.org
3. 安装node-sass $npm i -g node-sass  或  $cnpm i -g node-sass
4. 检查是否安装成功$node-sass -v
复制代码

2.使用方式

• 单文件编译

  $node-sass  原有的scss文件 生成的css文件
  $node-sass  原有的scss文件 -o 生成目录
  
  # example:
  $node-sass a.scss b.css
  $node-sass a.scss css_files
  复制代码

• 多文件编译

  $node-sass 原有的scss文件目录 -o 生成的css文件目录
  
  # example:
  $node-sass c -o d
  复制代码

• 文件监听模式

  # 在"1"和"2"的基础上填加"-w"命令行参数即可
  $node-sass -w -r 原有的scss文件 -o 生成目录
  $node-sass -w -r 原有的scss文件目录 -o 生成的css文件目录
  
  # example:
  $node-sass -w -r scss -o css
  
  # 效果：编译进程不结束，监听文件内容
  复制代码

• 文件监听模式并选择编译的模式

  $node-sass --watch -r 源文件 -o生成目录/编译文件 --output-style xxxx
  [ nested：嵌套缩进的css代码，它是默认值。
  
   expanded：没有缩进的、扩展的css代码。
  
   compact：简洁格式的css代码。
  
   compressed：压缩后的css代码。] 
  复制代码