Less
安装使用
- 在 Node.js 环境中使用 Less ：
npm install -g less
> lessc styles.less styles.css
- 在浏览器环境中使用 Less ：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
- vue+less
<!-- 把less源码安装到开发环境 -->
npm i less --save-dev
<!-- 安装less解析器 （★一定要指定版本） -->
npm i less-loader@6 --save-dev
<!-- lessc -v 查看版本 -->
<!-- 在main.js -->
import less from 'less' Vue.use(less)
<!-- 独立的vue文件需要引入less -->
<style lang="less">
变量 @v
@width: 10px;
@height: @width + 10px;
@img:'./img/';
#header {
width: @width;
height: @height;
background:url("@{img}1.png")
}
运算(左侧第一个单位)
<!-- 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。 -->
作用域（先从自身和混入再父元素）
混入 .mixin(params) --- 插入
基本:
.bordered {
border: dotted 1px black;
}
.a{
color: #111;
.bordered();
}
传参:
.bordered(@color:#eee) {
border: dotted 1px @color;
}
.a{
color: #111;
.bordered(#aaa);
}
映射 mixin()[params]
通常搭配混入一起使用,获取混入中的某个值
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
继承&:extend(mixin) --- 并集选择器
.inline {
color: red;
}
.a{
background: blue;
&:extend(.inline);
}
<!-- 输出 -->
.a{
background: blue;
}
.inline,
nav ul {
color: red;
}
"@media"规则嵌套和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。
@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
<!-- 编译为： -->
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
导入（@import ）
导入一个 .less 文件，此文件中的所有变量就可以全部使用了。
如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";```