如果在一个声明块中有多个双类选择器,是否可以简化以下内容(即不必重复使用body
标签):
body.shop, body.contact, body.about, body.faq {background-color:#fff;}
试试这个:
body{
&.shop, &.contact, &.about, &.faq {
background-color:#fff;
}
}
在这种情况下,我们可以使用@each
指令:
$pages: shop, contact, about, faq;
body {
@each $page in $pages {
&.#{$page} {
background-color:#FFF;
}
}
}
body {
&.shop, &.contact {
// Styles here...
}
}
body {
.shop, .contact, .about, .faq {
background-color:#FFFFFF;
}
}
我不确定这个直接回答了你的问题,但是使用 scss
,你可以像这样同时重用两个类:
.displayFlex {
display: '-webkit-box'; /* OLD - iOS 6-, Safari 3.1-6 */
display: '-moz-box'; /* OLD - Firefox 19- (buggy but mostly works) */
display: '-ms-flexbox'; /* TWEENER - IE 10 */
display: '-webkit-flex'; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flexOne {
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
}
.boxWrapper01 {
@extend .displayFlex;
@extend .flexOne;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: beige;
}
Sass中的父子关系
parent_tag {
.child {
// rules here
}
}