scss中&有多少种用法
时间: 2023-08-14 11:08:35 浏览: 67
在 SCSS 中,& 的用法有以下几种:
1. 连接父选择器和子选择器
如前面所述,可以使用 & 来连接父选择器和子选择器,从而简化样式表的书写。
```scss
.wrapper {
.box {
&:hover {
/* 添加 hover 效果 */
}
}
}
```
2. 嵌套伪类
可以使用 & 来嵌套伪类,比如:
```scss
a {
&:hover {
/* 添加 hover 效果 */
}
&:active {
/* 添加 active 效果 */
}
}
```
3. 嵌套属性选择器
可以使用 & 来嵌套属性选择器,比如:
```scss
input[type="text"] {
&:focus {
/* 添加 focus 效果 */
}
}
```
4. 嵌套同级选择器
可以使用 & 来嵌套同级选择器,比如:
```scss
.button {
&.primary {
/* 添加 primary 效果 */
}
&.danger {
/* 添加 danger 效果 */
}
}
```
5. 嵌套父选择器
可以使用 & 来嵌套父选择器,比如:
```scss
.wrapper {
&-header {
/* 添加 header 效果 */
}
&-content {
/* 添加 content 效果 */
}
}
```
这些都是 & 的常见用法,当然还有其他用法,比如结合 @at-root 或者 @each 等语句使用,但是这些用法相对比较少见。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)