CSS预处理器

• 定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏览器的兼容问题，让CSS更加简洁，适应性更强，可读性更佳，更易于代码的维护等诸多好处。

• CSS预处理器语言：scss（sass）、LESS等；

Sass和SCSS的区别

1. Sass是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和CSS书写语法类似.

2. 文件扩展名不同：“.sass”和“.scss”；

Sass安装（Windows版）

• 先安装ruby：Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本

安装sass：

• 方法一（通过命令安装sass）：打开命令终端，输入：gem install sass

• 方法二（本地安装sass）：从http://rubygems.org/gems/sass 下载sass安装包，然后在终端输入: “gem install <把下载的安装包拖到这里>” 然后直接额回车即可安装成功。

scss语法格式

css代码：

body { 
 font: 100% Helvetica, sans-serif; 
 color: #333;

使用scss代码：

$font-stack: Helvetica, sans-serif;
 $primary-color: #333; 
 body { 
 font: 100% $font-stack; 
 color: $primary-color;

tip:如果使用sass旧语法（sass语法），文件后缀名应为“.sass”；如果使用sass新语法（scss语法），文件后缀名应为".scss“语法，否则编译时编译不出来。

sass编译

编译的方法:

• 命令编译

• GUI工具编译

• 自动化编译

sass命令编译（在命令终端输入sass指令来编译sass，最直接，最简单）

• 单文件编译：

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

• 多文件编译：

  sass sass/:css/

• 上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

• 缺点及解决方法：

  缺点：每次保存scss文件后都要重新编译太麻烦；

  解决方法：开启“watch”功能：

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

• tip:文件路径不要带中文，如果有中文，watch功能无法正常使用。

sass嵌套输出方式nested

Paste_Image.png

只要在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested

sass展开输出方式expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

sass展开输出方式compact

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

sass展开输出方式compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

10.sass变量声明

$+变量名+：+变量值；

$width:200px;

以上内容摘自简书恰皮同学的总结。后续还会有的请大家多多关注。