如何精简我的 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函数可以自动生成所有这些代码呢？

- Lauraponi

Answer 1

遍历不同的大小，就像这样：

通过以下方式遍历：

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

- llobet

Answer 2

你的类太多了。你基本上只是为了不使用内联样式而复制所有CSS属性，这确实不是最优解，但绝对比像这样做要好。

当你将CSS类应用于元素时，它应该主要告诉你该特定元素属于哪个类别，而不是描述应该应用什么类型的视觉样式。

根据Google HTML/CSS风格指南，在ID和类命名下，他们说：

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

而应该有一些东西，可以隐含地表示更多的属性，比如

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

以此方式，您避免在元素上使用过多的类（我想您必须至少应用4-5个类才能使元素看起来符合要求），同时还赋予元素含义。在HTML中，含义总是好的。

此外，假设您有一些情况，其中您的元素不能完全通过一个类满足，而更像是现有类的变体，则可以在内联中添加差异或创建变体类（如 .disabled、.big、.full-width ），如果您认为它们将再次出现。

- iuliu.net

---

“.full-width” 和 “.large-bottom-margin” 不是相同的概念吗？或者说如果 margin 太过字面，那么应该使用 “.large-bottom-spacing”？ - Lauraponi

这取决于你的应用程序。我实际上有一种按钮类型，可以是固定宽度、动态宽度或全宽（父级）。这是设计师想出来的，所以它们就像同一类的三个变体。其中一个恰好接近你的情况。 - iuliu.net

Answer 3

我认为这是你自己编码风格和审美的问题，但对于我来说，这些类似乎有点“不语义化”。

如果有一天，你决定让这些元素具有填充而不是边距，那么你只需要执行以下操作：

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

这样做是有效的，但会让你的类名看起来很愚蠢。就像一个叫做.red-button的类一样。将其命名为.alert-button将更具未来性。

我倾向于根据功能命名类。

如果你仍想这样做，你可以通过以下方式使 SCSS 更加DRY。

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

- Marijan

---

谢谢您的回答！如果我将我的类命名为.small-bottom-spacing而不是margin，这样我可以描述类的功能。 （实际上，如果这样更好，我会觉得这有点傻，因为我们正在玩文字游戏……但是我很想知道您的看法！） - Lauraponi

通常我同意'iuliu.net'所说的 - 你应该让你的类更具体，这样你就可以在一个类上得到一堆CSS规则，而不是在一个HTML元素上有很多个类。但是，是的：至少做一些像small-bottom-spacing这样的东西更好。;-) - Marijan

是的，我理解你们两个说的话；这似乎是达成共识的方式。但我不明白的是，我可以有两个工作流程。a）预先创建所有类，当我需要它们时，只需将它们添加到我的html中。或者b）为我想要添加间距的每个html元素创建一个类，然后进入css，在那里编写该类及其间距，大多数情况下我不想给它任何其他属性。如果我以后想更改该间距，我必须在css中找到该类，而不是直接在我的html中修改它。这不是一种巨大的时间浪费吗？ - Lauraponi

你不必为单个元素编写特定的类。难点在于以合理和可管理的方式聚合属性。我会从另一方面来回答你的问题：如果你有30个带有.small-bottom-spacing类的标题和30个其他混合元素，后来你想要减少所有这些元素的边距，但标题除外。现在你必须浏览你所有的标记，并给元素添加类似.very-very-small-bottom-spacing的东西，或者使用类似.small-bottom-spacing:not(h1,h2,h3,h4,h5,h6) { margin-bottom: $margin/2; }的东西。你知道吗？ - Marijan

嗯，有道理。好的，我会挖掘我的代码，看看如何重构它。谢谢！ - Lauraponi

我同意你的观点，按照你所描述的方式操作确实很诱人，但最终可能会产生大量未被使用的 CSS。这对于原型设计可能是有好处的，但在正式生产中应该避免。感谢标记iuliu或我的答案。谢谢。 - Marijan