我应该使用扩展还是只将类添加到 HTML 中？

Question

例如，我有一个导航模块。

方法 1 将两个类添加到 HTML 中以获得所需的效果。一类用于基础，另一类用于修改。

HTML：

<ul class="nav nav-1">
  <li><a href="" class="" title="">Home</a></li>
  <li><a href="" class="" title="">Promotions</a></li>
  <li><a href="" class="" title="">Products</a></li>
  <li><a href="" class="" title="">About Us</a></li>
</ul>   

SCSS：

//BASE
.nav {      
    font-size: 0;    
    li {
        display: inline-block;
    }    
    a {
        font-size: 16px;
        display: block;
    }
}

//MODIFICATION
.nav-1 {        
    a {
        padding: 10px;
        background: #EEE;   
    }
}

方法 2 只是将一个类添加到 HTML 中以获得所需的效果。 base 被制成占位符并使用@extend 添加。

HTML：

<ul class="nav-1">
  <li><a href="" class="" title="">Home</a></li>
  <li><a href="" class="" title="">Promotions</a></li>
  <li><a href="" class="" title="">Products</a></li>
  <li><a href="" class="" title="">About Us</a></li>
</ul>   

SCSS：

//BASE
%nav {      
    font-size: 0;    
    li {
        display: inline-block;
    }    
    a {
        font-size: 16px;
        display: block;
    }
}

//MODIFICATION
.nav-1 { 

    @extend %nav;  

    a {
        padding: 10px;
        background: #EEE;   
    }
}

问题：

虽然我发现使用扩展技术消除了向 HTML 添加多个类的需要，但我觉得它会使 CSS 膨胀。如果我有.nav-2、.nav-3、ETC，生成的CSS会是这样的：

.nav-1, .nav-2, .nav-3 {
  font-size: 0;
}

.nav-1 li, .nav-2 li, .nav-3 li {
  display: inline-block;
}

.nav-1 a, .nav-2 a, .nav-3 a {
  font-size: 16px;
  display: block;
}

这是一个好习惯吗？还是我应该只保留方法1？

Answer 1

这可能是一个更好的做法，也可能不是一个更好的做法，我对 mixins 比较陌生，但我读过它们通常是编译 CSS 的更好选择。我没有太多时间，所以我无法对此进行测试，但它似乎应该可以工作，并且希望对你来说是一个更好的选择。

你可以有例如：

@mixin my-nav($padding, $background) {
   padding:$padding;
   background:$background;
}

然后每次需要调用它：

.nav1 {
    @include my-nav(10px, #eee);
}

.nav2 {
    @include my-nav(20px, #333);
}

希望这比扩展编译得更好，而且很有用:)

如果这没有帮助，阅读这篇文章应该 - http://www.sitepoint.com/sass-mixin-placeholder/