scss如何是孙子继承爷爷的高
时间: 2023-07-04 19:28:29 浏览: 68
在SCSS中,可以使用`@extend`关键字实现样式的继承。孙子元素可以通过继承爷爷元素的样式来获得相应的样式。例如:
```scss
// 定义爷爷元素样式
.btn {
font-size: 16px;
color: #333;
}
// 定义父亲元素样式,继承爷爷元素样式
.btn-primary {
@extend .btn;
background-color: #428bca;
}
// 定义孙子元素样式,继承父亲元素样式
.btn-primary-large {
@extend .btn-primary;
font-size: 20px;
}
```
在上述代码中,`.btn`定义了爷爷元素的样式,`.btn-primary`继承了`.btn`的样式,并添加了自己的样式。`.btn-primary-large`又继承了`.btn-primary`的样式,并添加了自己的样式。这样,`.btn-primary-large`就获得了`.btn`和`.btn-primary`的样式。
相关问题
scss 孙子继承爷爷的height
在 SCSS 中,可以使用 `@extend` 指令来实现子元素继承父元素的样式。如果要让孙子元素继承爷爷元素的 `height` 属性,可以这样写:
```scss
// 爷爷元素样式
.grandfather {
height: 100px;
}
// 父元素样式,继承自爷爷元素
.father {
@extend .grandfather;
}
// 子元素样式,继承自父元素
.son {
@extend .father;
}
// 孙子元素样式,继承自爷爷元素
.grandson {
@extend .grandfather;
}
```
这样,孙子元素就可以继承爷爷元素的 `height` 属性了。
scss如何是孙子继承爷爷的高,但不继承爸爸的高
在SCSS中,使用`@extend`关键字继承样式时,会同时继承父元素和爷爷元素的样式。如果想要孙子元素只继承爷爷元素的样式,而不继承父元素的样式,可以使用`@at-root`关键字将样式定义在顶层。例如:
```scss
// 定义爷爷元素样式
%btn {
font-size: 16px;
color: #333;
}
// 定义父亲元素样式,不继承爷爷元素样式
.btn-primary {
@at-root {
.btn-primary-large {
font-size: 20px;
@extend %btn;
}
}
background-color: #428bca;
}
```
在上述代码中,`%btn`定义了爷爷元素的样式,并使用了`%`表示为占位符。在`.btn-primary`中,使用`@at-root`将`.btn-primary-large`的样式定义在顶层,这样就避免了继承父元素的样式。`.btn-primary-large`中使用`@extend %btn`继承了爷爷元素的样式。这样,`.btn-primary-large`就只继承了爷爷元素的样式,而不继承父元素的样式。
相关推荐
![](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)