html - 如何缩小我的 scss 代码？

Question

我开始编写类，例如:

.small-bottom-margin { margin-bottom: $margin; }
.small-top-margin { margin-top: $margin; }
.medium-bottom-margin { margin-bottom: $margin *2; }
.medium-top-margin { margin-top: $margin *2; }
.large-bottom-margin { margin-bottom: $margin *4; }
.large-top-margin { margin-top: $margin *4; }

很快我希望能够指定在不同屏幕上发生的事情，例如(对于小底边距示例):

@media #{$small-only} { .small-bottom-margin-sm { margin-bottom: $margin; }}
@media #{$medium-only} { .small-bottom-margin-md { margin-bottom: $margin; }}
@media #{$large-only} { .small-bottom-margin-lg { margin-bottom: $margin; }}
@media #{$small-up} { .small-bottom-margin-sm-up { margin-bottom: $margin; }}
@media #{$medium-up} { .small-bottom-margin-md-up { margin-bottom: $margin; }}
@media #{$large-up} { .small-bottom-margin-lg-up { margin-bottom: $margin; }}
@media #{$medium-down} { .small-bottom-margin-sm-mp { margin-bottom: $margin; }}

...所有边距尺寸(中号和大号)以及顶部边距等。

我发现这在我的 html 的可读性和通过我的应用程序添加边距的速度方面非常实用，当你有一个复杂的布局时，这通常是一种痛苦，但在我的 css 中编写似乎太长了。

Is it bad practice to do this? If not, is there some kind of css function that would allow me to automatically generate all this code?

Answer 1

我认为这首先是您自己的编码风格和品味的问题，但对我而言，这些类似乎有点“无语义”。

如果有一天，您决定让这些元素具有 padding 而不是 margin 更实用，该怎么办？因此，您只需执行以下操作:

.small-bottom-margin {
    /* margin-bottom: $margin; */
    padding-bottom: $margin;
}

这可行，但会使您的类名看起来很愚蠢。很像一个名为 .red-button 的类。将其命名为 .alert-button 将更有前途。

我倾向于总是根据它们的功能来命名类。

如果你无论如何都想走那条路，你可以通过做这样的事情来保持 SCSS 更干。

$breakpoints: (
    'sm': $small-only,
    'md': $medium-only,
    'lg': $large-only,
    'sm-up': $small-up,
    'md-up': $medium-up,
    'lg-up': $large-up,
    'sm-mp': $medium-down
);

$sizeFactors: (
    'small': 1,
    'medium: 2,
    'large: 4
);

$directions: (
    'up',
    'down',
);

@each $breakpointKey, $breakpointValue in $breakpoints {
    @media #{$breakpointValue} {
        @each $sizeFactorKey, $sizeFactorValue in $sizeFactors {
            @each $direction in $directions {
                .#{$sizeFactorKey}-#{$direction}-margin-#{$breakpointKey} {
                    margin-#{$direction}: $margin * $sizeFactorValue; 
                }
            }
        }
    }
}