CSS 嵌套是指在一个 CSS 样式表中,可以嵌套另一个 CSS 样式表。这样,你就可以在一个文件中定义多个样式,而不必在多个文件中定义。
CSS 嵌套的优点是,它可以让你更有效地组织你的代码,并使你的代码更易于阅读和理解。例如,如果你想要定义一个特定元素的样式(例如 div 元素),你可以将所有相关的样式都放在一起(即嵌套在 div 中)。这样做可以使你的代码更加整洁、易于阅读和理解。
div { background-color: #ccc; padding: 10px; p { font-size: 14px; color: #000; } a { text-decoration: none; color: #00f; } }
css
中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID
:
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
像这种情况,sass
可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass
在输出css
时会帮你把这些嵌套规则处理好,避免你的重复书写。
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
上边的例子,会在输出css
时把它转换成跟你之前看到的一样的效果。这个过程中,sass
用了两步,每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先,把#content
(父级)这个id
放到article
选择器(子级)和aside
选择器(子级)的前边:
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
#content aside { background-color: #EEE }
}
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
然后,#content article
里边还有嵌套的规则,sass
重复一遍上边的步骤,把新的选择器添加到内嵌的选择器前边。
一个给定的规则块,既可以像普通的CSS那样包含属性,又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时,这种能力就非常有用了。
#content {
background-color: #f5f5f5;
aside { background-color: #eee }
}
容器元素的样式规则会被单独抽离出来,而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。
#content { background-color: #f5f5f5 }
#content aside { background-color: #eee }
大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器里边立刻应用一个类似于:hover
的伪类。为了解决这种以及其他情况,sass
提供了一个特殊结构&
。
您可以扩展Sass的功能,为用户提供不同类型的功能和自定义。要使用这些功能,用户应该有Ruby的知识。定义自定义Sass函数您可以在...
在本章中,我们将学习 CSS扩展。CSS扩展可以用于增强网页的功能。下表列出了SASS中使用的一些CSS扩展:序号CSS扩展和描述1 嵌套规...
描述 @mixin 指令用于定义mixin,它可选地包括mixin名称后面的变量和参数。例子以下示例演示如何在SCSS文件中使用 @mixin :sampl...
下表列出了您可以在SASS中使用的所有规则和指令。序号指令和描述1@import 它导入SASS或SCSS文件,它直接获取要导入的文件名。2@m...
描述扩展连接到一个选择器,它看起来类似于具有选择器作为参数的伪类。 当规则集具有许多选择器时,则关键字扩展可以应用于任何...