如何在 SCSS 中使用多个 @include? [英] How Can I Use Multiple @include in SCSS?
本文介绍了如何在 SCSS 中使用多个 @include?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在同一个 SCSS 中使用多个 include
.例如:
I want to use multiple include
in the same SCSS. For example:
.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 很无聊.有什么方法可以减少代码,我想用:
it's very Boring to Multiple @include frequently. Have Any Way to Reduce The Code, I want to use:
.section-ptb {
padding-top: 130px;
padding-bottom: 130px;
@include desktop , @include tablet, @include mobole {
padding-top: 80px;
padding-bottom: 80px;
}
}
但这不是有效的 SCSS.请告诉我另一种减少代码的方法.
But It's Not Valid SCSS. Please Tell Me Another Way To Reduce The Code.
推荐答案
正如@karthick 所提到的,不支持动态包含(目前).在您的情况下,我认为有一个 mixin 来处理所有媒体查询是有意义的 - 例如:
As mentioned by @karthick dynamic includes are not supported (yet). In your case I think it would make sense to have a single mixin to handle all media queries – like:
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;
}
}
这篇关于如何在 SCSS 中使用多个 @include?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文