Sass基础学习（一）

把Sass编译成css
1、打开命令提示符工具，用“cd desktop”进入到桌面。
2、“mkdir ninghao-sass && cd $_”在桌面创建一个名叫“ninghao-sass”的文件夹，并打开此文件。（倘若显示系统找不到指定路径，则需要输入“cd ninghao-sass” 命令即打开此文件）
3、输入“atom”则会打开atom编辑软件（为了一致，更加容易清楚，我也安装了atom编辑软件，在命令行中未能执行此命令，便自行打开atom编辑软件）。

4、打开atom之后，创建名叫“sass”和“css”的两个文件夹，在“sass”文件夹之下创建“style.scss”文件，进行简单编辑。

5、命令行中输入“sass sass/style.scss:css/style.css”,回车之后将在css文件夹之下编译一个名为“style.css”的文件（手动方法：编辑一次sass/style.scss就可以使用此命令编译一次css/style.css）此方法较为繁琐！

自动编译sass

1、 命令行输入“sass –watch sass:css”回车（将sass文件进行监视，倘若sass文件有改动，则会自动编译到css文件之中，比手动方法方便快捷！）

2、 自主测试
回到atom软件编辑器中，进行设置，当保存时，css/style.css则会自动编译成功

修改编译输出的css样式的格式
1、 输出格式有四种：nested(嵌套)、compact（紧凑）、expanded（扩展）、compressed（压缩）。 默认嵌套格式
2、 nested(嵌套)样式

编译过后的css样式会自动识别层级关系，但是显示的样式也是在内部紧凑！

3、 回到命令符，按住“Ctrl+C”将停止监视，终止自动编译。
4、 输入“sass --watch sass:css --style compact(编译风格)”，回车。回到atom即可看到紧凑css样式。

5、 输入“sass --watch sass:css --style compressed (编译风格)”，回车。回到atom即可看到压缩css样式。

6、 输入“sass --watch sass:css --style expanded (编译风格)”，回车。回到atom即可看到扩展css样式。

此样式是我们在前端开发中最清楚、明了、常用的css格式。

.sass与scss的区别

Sass有两种语法，一种是.sass的命名方式，另外一种是.scss命名方式，从图中可以看出两种方式在书写过程中在注释、引用、结束分号等地方的方式是不一样的。

变量-Variables
1、 声明变量的格式是$变量名：变量值（切记在.scss文件中书写值时，要加引号，否则会报错）
2、 声明变量之后，我们在.scss中定义css样式时引用变量，编译之后的css样式则会将变量值加载到css样式之中。

3、 在变量之中也可以再嵌套变量使用，当定义css样式时，则会通过变量值进行加载，最后按照css格式的样式编译出来。

嵌套-Nesting
嵌套则是在.scss文件中，按照需要定义的css样式直接嵌套输入，比如说，在我们前端开发之中，往往在nav导航栏之下，用ul列表进行样式设置，直接嵌套css样式的定义，不会影响当前（nav）属性之外的同样属性，编译之后的css样式则会根据css格式层级编译出来。

嵌套时调用父选择器
1、 当我们在伪类选择器使用父选择器嵌套时，我们会看到编译之后的伪类选择器和上级之间是有空格显示的，这样是不正确的应用。

2、 所以直接需要调用父类选择器时，我们需要在.scss文件中需要调用父类的前面添加一个&符号，这样编译之后，可以看到编译之后伪类选择器中的css样式之中是没有空格显示的。

3、 同理，我们来测试调用父选择器：可以看出，使用了&符号的地方则是调用了父选择器进行编译。