一般情况下,sass
在解开一个嵌套规则时就会把父选择器(#content
)通过一个空格连接到子选择器的前边(article
和aside
)形成(#content article
和#content aside
)。这种在CSS里边被称为后代选择器,因为它选择ID为content
的元素内所有命中选择器article
和aside
的元素。但在有些情况下你却不会希望sass
使用这种后代选择器的方式生成这种连接。
最常见的一种情况是当你为链接之类的元素写:hover
这种伪类时,你并不希望以后代选择器的方式连接。比如说,下面这种情况sass
就无法正常工作:
article a {
color: blue;
:hover { color: red }
}
这意味着color: red
这条规则将会被应用到选择器article a :hover
,article
元素内链接的所有子元素在被hover
时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。
解决之道为使用一个特殊的sass
选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&
符号,且可以放在任何一个选择器可出现的地方,比如h1
放在哪,它就可以放在哪。
article a {
color: blue;
&:hover { color: red }
}
当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&
被父选择器直接替换:
article a { color: blue }
article a:hover { color: red }
在为父级选择器添加:hover
等伪类时,这种方式非常有用。同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过JavaScript
在标签上添加一个ie的类名,为这种情况编写特殊的样式如下:
#content aside {
color: red;
body.ie & { color: green }
}
#content aside {color: red};
body.ie #content aside { color: green }
sass
在选择器嵌套上是非常智能的,即使是带有父选择器的情况。当sass
遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。
利用混合器,可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式,那就应该把这段样式构造成优良的混...
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID:#content article h...
您可以扩展Sass的功能,为用户提供不同类型的功能和自定义。要使用这些功能,用户应该有Ruby的知识。定义自定义Sass函数您可以在...
在本章中,我们将学习 CSS扩展。CSS扩展可以用于增强网页的功能。下表列出了SASS中使用的一些CSS扩展:序号CSS扩展和描述1 嵌套规...
描述 @mixin 指令用于定义mixin,它可选地包括mixin名称后面的变量和参数。例子以下示例演示如何在SCSS文件中使用 @mixin :sampl...