2016-07-22 2 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; 
} 
Смежные вопросы