...
|
...
|
@@ -130,13 +130,15 @@ Tip: SASS要保证应用到baz的样式也要用到bar,因此会生成不必 |
|
|
|
|
|
* 嵌套顺序
|
|
|
当使用Sass的嵌套功能的时候,重要的是有一个明确的嵌套顺序,以下内容是一个scss块应具有的顺序:
|
|
|
1. 当前选择器的样式属性
|
|
|
2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
|
|
|
3. 伪类元素 (:before and :after)
|
|
|
4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
|
|
|
5. 用Sass的上下文媒体查询
|
|
|
6. 子选择器作为最后的部分
|
|
|
|
|
|
1. 当前选择器的样式属性
|
|
|
2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
|
|
|
3. 伪类元素 (:before and :after)
|
|
|
4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
|
|
|
5. 用Sass的上下文媒体查询
|
|
|
6. 子选择器作为最后的部分
|
|
|
|
|
|
代码示例:
|
|
|
|
|
|
//GOOD
|
|
|
.product-teaser {
|
|
|
// 1. Style attributes
|
...
|
...
|
|