Question

我正在使用SCSS，我想要探索性地构建代码。在LESS它不是一个问题，但你会说可以像下面那样构造代码..

想象一下这个按钮有自己的文件。

[[AVSystemController sharedAVSystemController] setVolumeTo:10.0 forCategory:@"Ringtone"];

在我的媒体查询文件中.. （想象在每种媒体查询类型中都有多个包含。）

@mixin button-basic {
    .button {
        font-size: 14px;
    }
}

@mixin button-max-480 {
    .button {
        color: red;
    }
}


@mixin button-max-767 {
    .button {
        color: green;
    }
}

@mixin button-max-959 {
    .button {
        color: blue;
    }
}

@mixin button-min-960 {
    .button {
        font-size: 34px;
        color: purple;
    }
}


@media print, screen {
    @include button-basic();
}

Answer 1

您可以使用@mixins，但我不建议使用此方法，因为这会让您感到困惑。

我建议为每个变体使用修饰符类，并在声明中使用media-query。

.button {

    &--red {
        color: red;
    }

    &--green {
        color: green;
    }

    &--blue {
        color: blue;
    }

    @media (min-width: 768px) {
        font-size: 1.125rem;
    }

    @media (min-width: 960px) {
        font-size: 1.25rem;
    }

}

通过这种方式，您可以拥有非常干净的代码库，并可以将每个组件/模块拆分为自己的文件。

SCSS - 组织的最佳方式

1 个答案: