选择器中的＆符是什么意思？

Question

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

我有两个问题：

• 我不知道.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使您可以在父样式内嵌套子样式的情况下编写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的和，grandgrandchild（:)） own-pace。无论如何，你得到的想法:)

对于代码的另一部分（script部分），它与更少的部分无关，它导出名称为组件own-space（带有一些数据和方法）的组件，该组件在页面的其他位置像具有className的元素一样呈现own-space。