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

Question

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

方法1正在向中添加两个类，以达到所需的效果。一个类用于基，另一个用于修改。

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只向中添加了一个类。基被制成占位符，并使用@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等，则生成的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

这可能是一个更好的实践，也可能不是一个更好的实践，我是比较新的混合，但我已经读到，他们通常是一个更好的选择，当涉及到编译的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/