Как импортировать правило в другое правило в 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

Вы можете создать 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