Question

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

我有两个问题：

我不知道.own-space in less和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 { styles }
parent child { styles }
parent child grandchild { styles }

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

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

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

等

因此，.own-space的使用是为与父元素（在您的情况下为btn-box）的关系中的元素启用样式编写。

-tra，-input-identifycode-con，own-space是button元素的直接子元素，btn-box是span的子元素，{{1} } {是button的孩子，btn-box的孙子和own-pace的grandgrandchild（:)）。无论如何，你得到了ideea：）

对于代码的其他部分（script部分），它与我的反应似乎没有关系（或者可能是别的东西），导出名为own-space的组件（附加了一些数据和方法），其他地方在页面上呈现，就像一个className为own-space的元素。

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

1 个答案: