Question

我开始编写如下课程：

$entity -> setTitre($titre." ");

很快我想能够指定不同屏幕上发生的事情，例如（对于小底边距示例）：

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

...等所有边距大小（中等和大），以及上边距。

我发现这对于我的html +速度的可读性来说非常实用，可以通过我的应用程序添加边距，这在你有一个复杂的布局时通常会很痛苦，但是在我的CSS中编写它似乎很长。

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

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

Answer 2

你的课程太多了。你基本上只是为了不使用内联样式来复制所有的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 ，.big，.full-width）如果您认为将来可以再次出现。

Answer 3

我认为这首先取决于你自己的编码风格和品味，但对我来说，这些类似乎是“非语义”的。

如果有一天您认为这些元素更加实用，而不是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; 
                }
            }
        }
    }
}

如何缩小我的scss代码？

3 个答案: