2016-07-22 63 views
0

我可以用這個語法在SASSSASS繼承 - omiting基類

繼承一個類

代碼

.message { 
    border: 1px solid #ccc; 
    padding: 10px; 
    color: #333; 
} 

.success { 
    @extend .message; 
    border-color: green; 
} 

輸出

.message, .success, .error, .warning { 
    border: 1px solid #cccccc; 
    padding: 10px; 
    color: #333; 
} 

.success { 
    border-color: green; 
} 

我想要做的事類似,從而輸出中省略了消息。

所需的輸出

.success, .error, .warning { 
    border: 1px solid #cccccc; 
    padding: 10px; 
    color: #333; 
} 

.success { 
    border-color: green; 
} 

這可能嗎?

回答

1

是,使用佔位選擇:

SASS

%message { 
    border: 1px solid #ccc; 
    padding: 10px; 
    color: #333; 
} 

.success { 
    @extend %message; 
    border-color: green; 
} 

.error{ 
    @extend %message; 
    border-color: red; 
} 

輸出

.success, .error { 
    border: 1px solid #ccc; 
    padding: 10px; 
    color: #333; 
} 

.success { 
    border-color: green; 
} 

.error { 
    border-color: red; 
} 

的問題是,如果你想消息像一個類,那麼你有也延伸:

.message{ 
    @extend %message; 
}