SASS:生成的 CSS 不是最优的 [英] SASS: generated CSS not optimal

问题描述

我正在尝试学习 SASS.我得到了这个片段，但在我看来生成的 css 很糟糕.我希望所有这些 css 都包含在同一个 .container{} 中.不是三个不同的，如下图所示.

I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.

SASS:

   .container{
         @extend %clearfix;
         @extend %text-truncate;
         @include border-radius(10px);
     }

生成的css:

.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}

我想要的:

.container{
...clear fix
...text-truncat
...clear border-radius
}

推荐答案

这就是 @extend 的本质.如果您将扩展类更改为普通类，则会显示其工作方式.

This is the nature of @extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.

@mixin my-mixin() {
    padding: 1em;
}

.a {
    color: red;
}

.b {
    border: 1px solid;
}

.foo {
    @extend .a;
    @extend .b;
    @include my-mixin();
}

编译为:

.a, .foo {
  color: red;
}

.b, .foo {
  border: 1px solid;
}

.foo {
  padding: 1em;
}

使用 extend only 类只会从输出中隐藏名称.如果您的扩展类不打算重用，那么它们更适合作为 mixin.

Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.

另见:https://codereview.stackexchange.com/a/27910/26722

这篇关于SASS:生成的 CSS 不是最优的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！