SCCS has a parent link

How to make a link to the first nearest parent

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; } } } }

The output is 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; }

Why the necessary style is not applied or how to make & as a link to the first nearest parent?

but it is worth making a line

 input[type="checkbox"]:checked + .checkbox-label:before { background-color: #0066cc; }

and the style starts working

JSFIDDLE example

  • one
    the style does not apply because the selector + works this way. - Grundy
  • How then to make a link to the first parent? - ruslik
  • maybe not at all, because when & full path is inserted. But maybe something can be found in the help or some extension can be used - Grundy
  • Sass ampersand, select immmediate parent? - Grundy
  • one
    Give an example of a compiled selector that you want to get as a result. - YozhEzhi

2 answers 2

And maybe still a little BEM?

 .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; } } } }

Example on codepen .

  • it would be nice to add an explanation to both answers what is happening - Grundy
  • added some comments - Sasha Omelchenko
  • Well, you just made a checkbox label class - you could just as well pull all the code inside the checkbox class out - ruslik
  • @ruslik so maybe it's worth doing and not using a lot of nestings? The problem that you solve, it turned out because of this, because I propose to fight not with the investigation, but with the cause. - Sasha Omelchenko
  • the set is when it is more than 3. In my example, the nesting level is maximum 4, in the final css a sample of not more than 2 classes is obtained - ruslik

Or there is a working method, but I do not recommend it to anyone.

 .checkbox { input[type="checkbox"] { display: none; } .checkbox-label { display: inline-block; vertical-align: middle; font-size: 12px; &:before { content: ''; position: relative; display: inline-block; vertical-align: middle; width: 12px; height: 12px; border: 1px solid #CCC; margin-right: 5px; $a: str-insert(#{&}, " +", 10); /* добавляем в селектор & ' +' и записываем это в переменную $a. получаем селектор .checkbox + .checkbox-label:before */ $b: selector-replace(#{$a}, '.checkbox', 'input[type=checkbox]:checked'); /* заменяем при помощи функции selector-replace ".checkbox" на "input[type=checkbox]:checked" получаем селектор input[type=checkbox]:checked + .checkbox-label:before */ @at-root #{$b}:before { background-color: #0066cc; } /* чтобы избежать наследования селекторов используем @at-root и помещаем туда наш получившийся селектор */ } } }

Example on codepen .