Sass 中常见的选择器

发布时间：2023-05-25 13:47:25 所属栏目：教程来源：

导读：父选择器是 Sass 中一种特殊的选择器，用于嵌套选择器中，用来引用外部的选择器；通俗的讲就是，当你使用嵌套的时候，可能你会需要使用到嵌套外层的父选择器，比如为一个元素添加伪类 (hover、active、before、afte

父选择器是 Sass 中一种特殊的选择器，用于嵌套选择器中，用来引用外部的选择器；通俗的讲就是，当你使用嵌套的时候，可能你会需要使用到嵌套外层的父选择器，比如为一个元素添加伪类 (hover、active、before、after) 的时候，可以用 & 代表嵌套规则外层的父选择器，我们举个例子来更直观的感受下：

a {
&:hover {
color:red;
}
&:active {
color:blue;
}
&:before {
content:'';
}
&:after {
content:'';
}
span {
&:hover {
color:green;
}
}
}

在上面的 Sass 代码中我们编写了几个伪类，在编译的时候 & 将会被替换为嵌套外层的父选择器，有多层嵌套的话将会把父选择器一级一级的传递下去，最终转换为如下的 CSS 代码：

a:hover {
color: red;
}
a:active {
color: blue;
}
a:before {
content: "";
}
a:after {
content: "";
}
a span:hover {
color: green;
}

添加后缀 (Adding Suffixes)

可以使用 & 向外部选择器添加后缀，举个例子看下：

.Box {
width:100px;
&-head {
width:100%;
&-title {
color:red;
}
}
&-body {
width:;
}
&-footer {
width:;
}
}
上面这个例子将会转换为如下的 CSS 代码：

.Box {
width: px;
}
.Box-head {
width: ;
}
.Box-head-title {
color: red;
}
.Box-body {
width: ;
}
.Box-footer {
width: ;
}

占位符选择器 (Placeholder Selectors)

在 Sass 中这是一种特殊的选择器，称为 "占位符"；它以 % 开头，必须通过 @extend 指令调用，如果单独使用的话是不会编译到 CSS 中的，后面会讲到 @extend 指令，这里我们先举个简单的例子感受一下：

%placeholder {
width:100px;
height:100px;
color:red;
&:hover {
color:blue;
}
}
.btn {
@extend %placeholder;
font-size: px;
}
.btn2 {
@extend %placeholder;
font-size: px;
}
请记住，占位符必须通过 @extend 指令调用才会转换为如下的 CSS 代码：

.btn2, .btn {
width: px;
height: px;
color: red;
}
.btn2:hover, .btn:hover {
color: blue;
}
.btn {
font-size: px;
}
.btn2 {
font-size: px;
}

属性嵌套

当我们在写 CSS 样式的时候，有些 CSS 属性具有相同的命名空间 (namespace)，比如定义字体样式的属性： font-size ; font-weight ; font-family ; 它们具有相同的命名空间 font 。再比如定义边框样式的属性：border-radius ; border-color ; 它们具有相同的命名空间 border 。当然还有很多其他这种的属性，为了方便管理和避免重复输入，Sass 允许将属性嵌套在命名空间中，同时命名空间也可以具有自己的属性值，我们举例看一下：

.Box {
border: {
radius: px;
color:red;
}
font: {
family:'YaHei';
size:px;
weight:;
}
margin: auto {
bottom: px;
top: px;
};
}
上面这种写法将会被转换为如下的 CSS 代码：

.Box {
border-radius: px;
border-color: red;
font-family: "YaHei";
font-size: px;
font-weight: ;
margin: auto;
margin-bottom: px;
margin-top: px;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!