我想在同一个scss中使用多个include。例如
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
@include desktop {
padding-top: 80px;
padding-bottom: 80px;
}
@include tablet {
padding-top: 80px;
padding-bottom: 80px;
}
@include mobole {
padding-top: 80px;
padding-bottom: 80px;
}
}
它经常对多个@include很无聊。有任何方法可以减少代码,我想使用
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
@include desktop , @include tablet, @include mobole {
padding-top: 80px;
padding-bottom: 80px;
}
}
但这不是有效的SCSS。请告诉我另一种减少代码的方法。
正如@karthick所提到的那样,动态包含(尚未支持)。在你的情况下,我认为有一个mixin来处理所有媒体查询是有意义的 - 比如:
SCSS
// map holding breakpoint values
$breakpoints: (
mobile : 0px,
tablet : 680px,
desktop: 960px
);
// mixin to print out media queries (based on map keys passed)
@mixin media($keys...){
@each $key in $keys {
@media (min-width: map-get($breakpoints, $key)){
@content
}
}
}
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
// pass the key(s) of the media queries you want to print
@include media(mobile, tablet, desktop){
padding-top: 80px;
padding-bottom: 80px;
}
}
CSS输出
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
}
@media (min-width: 0px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 680px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 960px) {
.section-ptb {
padding-top: 80px;
padding-bottom: 80px;
}
}