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

#css #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 
    

Ответы

Ответ 1

А может всё-таки немного БЭМа?

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


Пример на кодпене.


Ответ 2

Или вот есть рабочий метод, но делать так я не рекомендую никому.

.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 
        и помещаем туда наш получившийся селектор
      */
    }
  }
}


Пример на кодпене.