SASS如何使用父选择器?代码示例

2021年3月31日18:08:09 发表评论 777 次浏览

父选择器是SASS中的一种特殊类型的选择器, 它使我们可以有效地重用外部(父)选择器。请参阅下面的示例以了解想法:

例如:假设我们有以下CSS样式块,

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;
}

现在, 你要向锚块添加悬停效果, 然后你将编写

a:hover {
    background-color: gray;
}

使用SASS, 你无需重复外部选择器(a), 你可以执行以下操作:

SASS文件:

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;

    &:hover {
        background-color: gray;
    }
}

这里&称为父选择器。编译后的CSS文件将与我们的CSS样式相同。

编译的CSS文件:

a {
    text-decoration: none;
    display: inline-block;
    background-color: lightgray;
}

a:hover {
    background-color: gray;
}

优点:

你可以创建带有前缀或后缀作为父选择器名称的新类, 这使我们能够编写

非常结构化的CSS样式, 非常高效。

SCSS文件:

.main-block {
    border: 1px solid black;
    position: relative;

    &_subblock1 {
        position: absolute;
        display: block;
    }

    &_subblock2 {
        position: absolute;
        display: inline-block;
    }

}

编译的CSS文件:

.main-block {
  border: 1px solid black;
  position: relative;
}

.main-block_subblock1 {
  position: absolute;
  display: block;
}

.main-block_subblock2 {
  position: absolute;
  display: inline-block;
}

你可以使用不同的伪类或伪元素在外部(父)选择器中添加样式。见

第一个示例, 我们使用:hover伪类在带有父选择器的锚标记中添加效果。


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: