安装:
多种安装方式
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 官网
标签: cssH5部分前端front