XiangJv

 

安装：

多种安装方式

nodeJs:
npm install -g less
> lessc styles.less styles.css

npm i less --save-dev

浏览器:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>

变量：

变量@的声明 定以一个属性的值

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合：

mixin是一种将一组属性从一个规则集包含到另一个规则集的方法(“混合”)。假设我们有这样一个类:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

我们想在其他规则集中使用这些属性。我们只需要在需要属性的地方输入类名，就像这样:

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

. bor类的属性现在将同时出现在#menu a和.post a.中(注意，还可以使用#id作为mixin)。

嵌套：

& 表示当前选择器的父类

/* css */
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

/*Less*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

运算：

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

calc

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

导入：

@import "library"; // library.less
@import "typo.css";

如果这些还都不是你想要的 点击去Less 官网