Question

例如我有一个导航模块。

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

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中添加一个类以获得所需的效果。基础制作占位符并使用@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;   
    }
}

问题：

虽然我发现使用extend技术不需要为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

这可能是一种更好的做法，也可能不是一种更好的做法，我对mixin相对较新，但我已经知道，在编译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/

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

1 个答案: