如何将规则导入sass中的另一条规则？

Question

如果我有这样的

.base { 
    color:red; 
} 

.variation1 { 
    color:red; 
    border:1px solid black; 
} 

我怎样才能将其更改为类似

.base { 
    color:red; 
} 

.variation1 { 
    import @.base 
    border:1px solid black; 
} 

的青菜？我基本上不想重复基本的东西，我想导入它的属性。

有谁知道吗？

感谢

Answer 1

密新

您可以创建一个mixin创建CSS的可重复使用的块。这有助于避免重复的代码。

与下面的示例相比，我会建议更多的语义命名系统。

@mixin base { 
    color: red; 
} 

.base { 
    @include base; 
} 

.variation1 { 
    @include base; 
    border:1px solid black; 
} 

有关混入指令看看这个article上Sitepoint更多信息。

扩展

CSS Tricks的extend功能，还可以用来很好地阐述但它有一些怪癖吧。

.base { 
    @include base; 
} 

.variation1 { 
    @extend .base; 
    border:1px solid black; 
} 

• 它扩展所有嵌套的选择以及
• 它不能扩展嵌套选择
• 不能在媒体查询内部延伸到媒体查询之外定义选择

从CSS Tricks