主页 / 问题 / 643627
Accepted
ruslik
Asked:2020-03-24 18:22:35 +0800 CST2020-03-24 18:22:35 +0800 CST

链接到第一个父级 SCSS

  • 772

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示例

css

2 个回答

  1. Best Answer

    或者也许是一点 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;
      }
    }
  }
}

    代码笔示例。

    • 3

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

    代码笔示例。

    • 1

相关问题