В SCCS есть ссылка на родителя
Как сделать сссылку на первого ближайшего родителя
SCSS
.checkbox {
input[type="checkbox"] {
display: none;
}
.checkbox-label {
display: inline-block;
vertical-align: middle;
font-size: 12px;
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
border: 1px solid #CCC;
margin-right: 5px;
}
input[type="checkbox"]:checked + & {
&:before {
background-color: #0066cc;
}
}
}
}
На выходе получается CSS
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox .checkbox-label {
display: inline-block;
vertical-align: middle;
font-size: 12px;
}
.checkbox .checkbox-label:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
border: 1px solid #CCC;
margin-right: 5px;
}
input[type="checkbox"]:checked + .checkbox .checkbox-label:before {
background-color: #0066cc;
}
Почему не применятся нужный стиль или как сделать & как ссылка на первого ближайшего родителя?
но стоит сделать строчку
input[type="checkbox"]:checked + .checkbox-label:before {
background-color: #0066cc;
}
и стиль начинает работать
пример JSFIDDLE
Ответ
А может всё-таки немного БЭМа?
.checkbox {
&__input {
display: none;
}
/*
формируем БЭМ-элементы при помощи &
получаем .checkbox__input
*/
&__label {
display: inline-block;
vertical-align: middle;
font-size: 12px;
/*
получаем .checkbox__label и т. д.
*/
&:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 12px;
height: 12px;
border: 1px solid #CCC;
margin-right: 5px;
.checkbox__input:checked + & {
background-color: #0066cc;
}
}
}
}
Пример на кодпене
Комментариев нет:
Отправить комментарий