Less预处理——变量和嵌套

  <div id="wrap">
      Hello Less!
  </div>
  <div class="wrap">
      Hello World!
  </div>

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
@{mySelector} {
    color: #ccc;
    width: 50%;
}
.@{wrap} {
    color: skyblue;
    width: 50%;
}
#@{wrap} {
    color: aqua;
    width: 50%;
}

#wrap {
  color: #ccc;
  width: 50%;
}
.wrap {
  color: skyblue;
  width: 50%;
}
#wrap {
  color: aqua;
  width: 50%;
}

  <div id="wrap">
      Hello Less!
  </div>

// 选择器变量
@mySelector: #wrap;
@wrap: wrap;
// 属性变量
@borderStyle: border-style;
@solid: solid;
@{mySelector} {
    @{borderStyle}: @solid;
}

#wrap {
  border-style: solid;
}

@images: "../../img";
body {
    background: url("@{images}/xxx.png");
}

body {
  background: url("../../img/xxx.png");
}

@Rules: {
       width: 60px;
       height: 30px;
       border: 1px solid #ccc;
       /*第一步： 溢出隐藏 */
       overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;
}
#wrap {
    @Rules();
}

#wrap {
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}

@width: 300px;
@color: #ccc;
#wrap {
    width: @width - 20;
    height: @width - 20 * 2;
    margin: (@width - 200) * 2;
    color: @color*1;
    background-color: @color + #111;
}

#wrap {
  width: 280px;
  height: 260px;
  margin: 200px;
  color: #cccccc;
  background-color: #dddddd;
}

@var:@a;
@a:100%;
#wrap {
    width: @var;
    @a:9%;
    border: 1px solid #ccc;
}

#wrap {
  width: 9%;
  border: 1px solid #ccc;
}

@fond:@var;
@var:'fond';
#wrap::after {
    content: @var;
}

#wrap::after {
  content: 'fond';
}

<div class="center">
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

.center {
    width: 100px;
    height: 100px;
    background: red;
    & #list {
        width: 50px;
        height: 50px;
        background: skyblue;
        li {
            width: 20px;
            height: 20px;
            background: #ccc; 
        }
    }
}

.center {
  width: 100px;
  height: 100px;
  background: red;
}
.center #list {
  width: 50px;
  height: 50px;
  background: skyblue;
}
.center #list li {
  width: 20px;
  height: 20px;
  background: #ccc;
}

#main {
    @media screen {
        @media (max-width: 768px) {
            width: 100px;
        }
    }
    @media tv {
        width: 2000px;
    }
}

@media screen and (max-width: 768px) {
  #main {
    width: 100px;
  }
}
@media tv {
  #main {
    width: 2000px;
  }
}

#main {
    &.show {
        display: block;
    }
}
.show {
    display: none;
}

#main.show {
  display: block;
}
.show {
  display: none;
}

const main = document.getElementById('main')
main.classList.add("show")