6

在我的 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;
    }

}

我知道我可以为每个查询创建一个单独的部分，然后将它们导入另一个工作表并将它们包装在一个查询中，但是随后开始变得难以维护。

4

1 回答 1

2

也许在未来的版本中。

但是将它们组合或分开并没有太大的区别。你可以在这个网站上做一个测试：http: //aaronjensen.github.io/media_query_test

有区别，但用户不会真正意识到区别。

于 2013-05-03T22:48:28.277 回答