less 使用

less 根据屏幕大小适配

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

output:

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

参考链接：
http://lesscss.cn/features/#variables-feature

---

混合（Mixins）

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

.a, #b { color: red; } 
.mixin-class { .a(); } 
.mixin-id { #b(); }

which results in:

.a, #b { color: red; } 
.mixin-class { color: red; }
.mixin-id { color: red; }

参考链接：
https://less.bootcss.com/#-mixins-

https://less.bootcss.com/#-variables-

---