Страницы

Поиск по вопросам

среда, 20 февраля 2019 г.

Ссылка на первого родителя SCSS

В 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; } } } }
Пример на кодпене

Комментариев нет:

Отправить комментарий