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规则。
可以继承包含后代选择器的。