在我的 SCSS 中,我对不同类型的样式使用不同的局部。
例如
_buttons.scss
.btn {
background:red;
}
@media only screen and (min-width: 768px) {
.btn {
font-size:10px;
}
}
@media only screen and (min-width: 992px) {
.btn {
font-size:20px;
}
}
_slideshow.scss
.slideshow {
background:green;
}
@media only screen and (min-width: 768px) {
.slideshow {
font-size:12px;
}
}
@media only screen and (min-width: 992px) {
.slideshow {
font-size:24px;
}
}
屏幕.scss
@import "buttons";
@import "slideshow";
以这种方式使用 partials 可以更轻松地在项目之间重用代码。例如,如果我有一个不需要幻灯片的项目,我可以省略 _slideshow.scss。
这种方法的缺点是媒体查询位(例如@media only screen and
)在最终的 CSS 中会重复多次,这会很快导致代码臃肿。
无论如何我可以保持我的部分原样,但告诉 scss 在输出中将它们组合在一起,因此所有 min-width: 768px 在一个查询中组合在一起,所有 min-width: 992px 在一个查询中。
例如,输出如下:
.btn {
background:red;
}
.slideshow {
background:green;
}
@media only screen and (min-width: 768px) {
.btn {
font-size:10px;
}
.slideshow {
font-size:12px;
}
}
@media only screen and (min-width: 992px) {
.btn {
font-size:20px;
}
.slideshow {
font-size:24px;
}
}
我知道我可以为每个查询创建一个单独的部分,然后将它们导入另一个工作表并将它们包装在一个查询中,但是随后开始变得难以维护。