Less 选择器中的 & 符号是什么意思？

Question

我下载了一个项目，并在其中使用less 编写样式表。 而在脚本代码中name: own-space，在less代码中，有&-btn-box、&-tra和&-input-identifycode-con选择器。

我有两个问题：

• 我不知道less中的.own-space和name: own-space的关系。

• &-btn-box、&-tra 和 &-input-identifycode-con 是什么意思？它们的作用是什么？

我的代码如下：

    <template>
      <div>
        .....
      </div>
    </template>

    <script>

      export default {
        components: {



        },
        name: 'own-space',
        data () {
          ...
          };
        },
        methods: {
          ...
        }
      };
    </script>
    <style lang="less" rel="stylesheet/less">

      ...

      .own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }
   
        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }
 
      }

    </style>

Answer 1

Less/Sass 和其他预处理器允许您编写带有嵌套规则的 CSS 代码（除了变量、mixin 等其他内容）。因此，您不必像在 CSS 中那样编写完整路径。您可以嵌套样式。

例如，你可以有这样的结构：

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

在纯 CSS 中，为您要编写的每个元素设置样式：

parent { styles }
parent child { styles }
parent child grandchild { styles }

使用 Less（和其他预处理器，如 SCSS），您可以执行以下操作

parent {
    some parent styles 
    & child {
        some child styles 
        & grandchild {
             some grandchild styles
        }
    }
 &:hover { hover styles on parent }
 &:before { pseudo element styles }
}

等等

因此，使用& 可以为与父元素有关系的元素启用样式编写（在您的情况下为.own-space）。

btn-box，-tra，-input-identifycode-con 是 own-space 元素的直接子元素，button 是 btn-box 的子元素，span 是 button 的子元素，btn-box 的孙子元素和，own-pace 的孙子 (:))。无论如何，你明白了:)

对于特定问题 .own-space { &-btn-box { ... } } 意味着有一个类为own-space-btn-box 的元素很可能是own-space 的子元素，但不是 必须（见答案结尾）。 HTML 似乎是在 BEM style 中构造的，但不符合文档和规则。使用预处理器进行样式设置时，强烈建议使用 BEM 命名策略。看看吧。

例如，当前结构可能如下所示：

_{堆栈片段不接受 SCSS。您可以查看一个工作示例here}

.own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }

        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }

      }

<div class="own-space">
  The SO snippet doesn't support CSS preprocessors.
   Example purposes only 
    <div class="own-space-btn-box">
      <button>Button</button>
      <span>Some span</span>
    </div>
    <div class="own-space-tra">
       Tra tra
    </div>
    <div class="own-space-input-identifycode-con">
      identifycode
    </div>
</div>

重要当您看到这些样式时，大多数情况下这些元素ARE相关，但请记住，在调试其他人的代码时，情况并非总是如此。它们可以不相关，例如

<element class="element"> ....  </element>
<element2 class="element-element2"> ....  </element2>

SCSS 仍然可以看起来像这样并且具有相同的效果

.element { 
   styles
    &-element2 {
     styles
   }
}

查看示例 -> not related

& 的另一个使用示例是，如果您有两个元素具有一个公共类和一个特定类，例如

 <element class="element specific1">....</element>
 <element class="element specific2">....</element>

您可以将常用样式和特定样式一起添加，例如

.element { 
   /* common styles */
   &.specific1 {
     /* specific 1 styles */
   }
   &.specific2 {
     /* specific 2 styles */
   }
}

& 有很多不同的用途。阅读更多：

• the-sass-ampersand
• Sass parent selector
• LESS
• BEM naming