如何缩小我的 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 中编写似乎非常长。

这样做是不好的做法吗？ 如果没有，是否有某种 css 函数可以让我自动生成所有这些代码？

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; 
                }
            }
        }
    }
}

Answer 2

像这样遍历不同的大小：

   $sizes: (
      '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
    );

    @each $key, $value in $sizes {
      @media #{$value} { .small-bottom-margin-#{$key} { margin-bottom: $margin; }}
    }

Answer 3

你的课程太多了。您基本上只是为了不使用内联样式而复制所有 css 属性，这确实不是最理想的，但绝对比这样做更好。

当您将 CSS 类应用于元素时，它应该主要说明该特定元素 是的 类，而不是描述它应该具有什么类型的视觉样式已申请。

根据the Google HTML/CSS Style guide，在ID 和类命名他们说

/* Not recommended: presentational */
.button-green {}
.clear {}

并且应该有一些隐含意味着更多属性的东西，比如

/* Recommended: specific */
.contact-image {}
.btn-primary {}
.video {}

通过这种方式，您可以避免在一个元素上使用大量的类（我想您必须至少应用 4-5 个类才能使元素看起来像您想要的那样），并且您还可以添加含义一个元素。在 HTML 中，意义总是好的。

另外，假设您的元素不能完全满足某个类的要求，而更像是现有元素的变体，您可以内联添加差异或创建变体类（如 .disabled、@ 987654325@, .full-width) 如果您认为它们将来会再次出现。