scss css预处理器

SCSS css预处理器

1、css预处理器介绍

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

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

2、SCSS介绍

SCSS官方称SCSS是 “世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”
主要特性有：

1. 兼容CSS： Sass完全兼容所有版本的CSS。可以无缝地使用任何可用的CSS库。
2. 特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。
3. 社区庞大： 数家科技企业和成百上千名开发者为Sass提供支持。
4. 框架： 有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

SCSS是采用的Ruby语言编写的一款css预处理器语言。
Sass和SCSS其实是同一种东西，主要区别在于

1. 文件扩展名不同，.sass 和 .scss
2. 语法书写方式不同，Sass以严格的缩进式语法规则编写，而SCSS的语法与CSS语法非常类似

3、安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

1. mac

sass官方说mac系统自带Ruby。如果环境中并没有的话，可以使用brew进行安装

brew install ruby

2. windows

从Ruby官网下载安装包并安装。
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

是否安装成功ruby，使用命令行查看ruby版本信息

ruby -v

gem install sass // 安装sass
sass -v  // 查看sass版本号

4、编译

1. 单文件编辑

sass <要编译的文件及路径>:<要输出CSS文件及路径>
例如：

sass --watch demo.scss:demo.css

2. 多文件编译

sass sass/:css/

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

3. 输出方式

1. expanded 展开式，与开发编写的格式一样，{ } 另起一行
2. nested 嵌套式，与开发编写格式类似，}不另一行
3. compact 紧凑式，每个块，编译成一行css
4. compressed 压缩式，去掉标准的 Sass 和 CSS 注释及空格

5、学习

1. 基础

2. 运算

3. 控制指令

4. 函数功能

5. @规则

学习章节xmind笔记在附件，下载可查看完整部分，希望对大家有所帮助。

参考资料：
sass中文网-中文文档
慕课网-大漠-sass入门篇
慕课网-大漠-sass进阶篇