css - 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 代码(除了变量、mixins 等其他东西)。所以你不必像在 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 的 child , span是 button 的 child , btn-box 的孙子和 own-pace 的孙子 (:)) .不管怎样，你明白了:)

具体问题 .own-space { &-btn-box { ... } }意味着有一个类为 own-space-btn-box 的元素这很可能是 own-space 的 child 但不一定不(见答案结尾)。 HTML 似乎以 BEM style 结构化但不是根据文档和规则。当使用预处理器进行样式化时，强烈建议使用 BEM 命名策略。看一看。

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

_{Stack Snippets 不接受 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>

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

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

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

.element { 
   styles
    &-element2 {
     styles
   }
}

参见示例 -> not related

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

 <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