关于#less#请求解答

Question

有一段less的主题变更代码 我没有系统学过有点看不懂 有没有人可以给我解惑下

最好可以逐行标注下

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-switch';

html[data-theme='dark'] {
  .@{prefix-cls} {
    border: 1px solid rgb(196 188 188);
  }
}

.@{prefix-cls} {
  position: relative;
  display: flex;
  width: 50px;
  height: 26px;
  padding: 0 6px;
  margin-left: auto;
  cursor: pointer;
  background-color: #151515;
  border-radius: 30px;
  justify-content: space-between;
  align-items: center;

  &-inner {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.5s, background-color 0.5s;
    will-change: transform;
  }

  &--dark {
    .@{prefix-cls}-inner {
      transform: translateX(calc(100% + 2px));
    }
  }
}

</style>

Answer 1

&的语法
https://blog.csdn.net/hsany330/article/details/106074941
less的语法
https://www.jianshu.com/p/9f64b62e8e65

@prefix-cls: ~'@{namespace}-dark-switch'; //定义一个 类名  
 
html[data-theme='dark'] { // html 的 data-theme 属性 =dark的话 就设置 @{prefix-cls} 的样式
  .@{prefix-cls} {
    border: 1px solid rgb(196 188 188);
  }
}
 
.@{prefix-cls} { //接着设置 样式
  position: relative;
  display: flex;
  width: 50px;
  height: 26px;
  padding: 0 6px;
  margin-left: auto;
  cursor: pointer;
  background-color: #151515;
  border-radius: 30px;
  justify-content: space-between;
  align-items: center;
 
  &-inner { //会编译成  @{prefix-cls}-inner {}
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.5s, background-color 0.5s;
    will-change: transform;
  }
 
  &--dark { //会编译成  @{prefix-cls}--dark {}
    .@{prefix-cls}-inner {
      transform: translateX(calc(100% + 2px));
    }
  }
}