学习SCSS（SASS）笔记——day1

1：变量的声明

变量的声明使用$，其声明的方式同css相同，变量是可以进行引用的，变量中-与_代表同一个意思。

2：父选择器

父选择器的标识符&; 可以放在任何一个选择器可以可出现的位置。

3：Sass使用技巧

sass可以将css中重复使用的选择器给提取出来（按内嵌选择器的规则）。
eg：css：.container h1, .container h2, .container h3 { margin-bottom: .8em }
sass：.container {
h1, h2, h3 {margin-bottom: .8em}
}
在线转换编辑器中，此例子转换并没有效果。

4：子组合选择器和同层组合选择器：>、+和~;

1：>用于子组合选择器中。 eg：article > section { border: 1px solid #ccc }
     选择器只会选择article下紧跟着的子元素中命中section选择器的元素。
2：+用于同层相邻的选择器中。eg：header + p { font-size: 1.1em }
      选择header元素中紧跟的p元素。
3：~同层全体组合选择器。eg：article ~ article { border-top: 1px dashed #ccc }
       选择所有跟在article后的同层aricle元素。

5：属性的嵌套。

规则：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

6：引入注意

引入sass和scss时引入文件夹下的css文件即可，
scss引入另一个scss时，只需要使用即可@import “test”;
scss引入css时，可以将引入css的文件放在scss的底部，或者将原css文件的后缀改为scss既可以使用。

7：注释的使用，// ， /**/俩种风格均可以使用。

8：混合器的使用

混合器的使用：@mixin xx{}来定义一大段注释 xx为注释的别名
通过：@include xx；来引入这一大段的注释。
也可以用来定义一个带参的函数，进行函数来传参。
如何函数中的变量值有n个而传入的参数只有一个时，所有的变量值都默认为传入的参数。

9：选择器的继承

使用选择器继承时，继承主选择器的所有属性。
使用继承时，（继承只会在生成css时复制选择，不回复制css的属性）
为了避免出现大量选择器复制的情况，尽量不要在css规则中使用后代选择器去继承css规则。
可以继承包含后代选择器的。