SASS入门介绍及安装

1. SASS介绍

（1）为什么学习sass？

1）根据第一阶段和第二阶段的项目，我们邪恶css选择器书写非常的长。
2）项目的优化，比如利用css中引入的css，实现文件的合并。

（2）什么是SASS

SASS就是一个CSS的开发工具，它提供了很多便利CSS的书写方式。可以极大地节省CSS开发的时间。 Sass并不能直接被浏览器识别，需要编译成CSS只有，才能被浏览器识别，所以Sass也称为预编译语言 CSS和js可以直接被浏览器识别。

Sass/less——>css
TypeScript—>js

（3）文件后缀名

Sass有两种：

1、.sass
2、.scss

区别：

写法跟css一样，但sass不要大括号和末尾的分号； scss大括号，且跟css一样。 后面的学习，指的sass文件，指的是后缀名为scss文件

2 .SASS安装

注意：安装的指的编译器：
1、 ruby安装： sass依赖于ruby，所以安装sass之后先把ruby安装好。
2、sass安装
3、淘宝RubyGems镜像安装 sass
4、检查安装

3 SASS 编译

1、 命令方式 Sass 待编译的sass源文件目录 输出的css文件目录  注意：正常运行时，目录切不可出现中文路径，否则出错，如上图所示 1、 普通变量

普通的变量可以写成这样：
fonSize:30px; color:red;
p{
font-size: fonSize;color: color;
}
div{
font-size: fonSize;color: color;
}

SASS导入

标语：在一个scss文件中导入另一个scss文件，属性可以通用。

@import”base.text2”;
body, div, a{
padding: 0;
margin: 0;
}
.header{
font-size:$headerFonSize;
}

headerFonSize:50px; themeColor:red;
$contentWidth:120px;

导入作用：
1. 将多个sass文件合并到一个css文件中
2. 可使用外部文件导入scss

变更监听

1、 单文件监听命令
Sass —watch 源文件:目标文件
好处：结构清晰，减少代码的重复，更方便维护 。
2、文件夹监听命令
Sass –watch 源文件 编译之后的文件夹
如果原文件夹 下还有文件夹，编译的时候会自动保留原有的文件结构，同时编译以后的css文件名和scss的文件名称是一样的。
注意：一定不要忘记，编辑命令中的空格！