4

我正在使用 HAML / SASS 开发 Rails 项目，目前正在尝试重构我的 CSS 代码。也许这只是一个口味问题，但我想谈谈你对两种不同方法的看法：你通常使用多个 CSS 类，还是更喜欢使用 mixins？使用一个或另一个是否有任何性能问题？你们中有些人两者都用吗？如果是这样，你如何分割你的代码？

例如 ：

多个班级

// index.html
<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

// style.css.sass
.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

混合

// index.html
<div id="box1"></div>
<div id="box2"></div>

// style.css.sass
@mixin square
    // ...
@mixin rounded
    // ...
@mixin red
    // ...
@mixin green
    // ...

#box1
    // Some properties
    // ...
    @include rounded
    @include red

#box2
    // Some properties
    // ...
    @include square
    @include green
4

2 回答 2

-1

the second one is faster because the browser see less blocks of codes

with this fact that ID selector is more faster than class selector I go with second

Edit :

Also the first one is hard to read and maintain

于 2013-06-14T03:15:08.957 回答
-1

这样做的正确方法是extends。

索引.html

<div id="box1" class="rectangle rounded red"></div>
<div id="box2" class="rectangle square green"></div>

样式.css.sass

.rounded
    // ...
.square
    // ...
.red
    // ...
.green
    // ...

#box1
  @extend .rounded
  @extend .red

#box2
  @extend .square
  @extend .red

您可以通过将点替换为 percent来防止这些类出现在 CSS 中。

于 2013-07-18T14:47:01.157 回答