css - 这两个哪个是写SASS的最好方法

Question

我想问一下，在编写 SASS 时，对于下面提供的两个示例，我以何种方式格式化代码是否重要？请查看以下两个输出相同 CSS 的选项。

@include breakpoint(large) {
.bookhome{
padding-top: 0; }}

或

.bookhome{
@include breakpoint(large) {
padding-top: 0; }}

Answer 1

我认为这是一个非常主观的问题。每个人对构建 CSS 都有自己的看法和偏好。因此，我认为没有正确或错误的答案。

就个人而言，我更喜欢将我的断点嵌套在我的 CSS 选择器中，这样您就可以一目了然地看到断点之间的样式变化情况。

.example {
    // mobile

    @include breakpoint(small) {
        // tablet
    }

    @include breakpoint(medium) {
        // desktop
    }

    @include breakpoint(large) {
        // large desktop
    }

    &--modifier {
        // mobile

        @include breakpoint(small) {
            // tablet
        }

        @include breakpoint(medium) {
            // desktop
        }

        @include breakpoint(large) {
            // large desktop
        }
    }
}