Less （Leaner Style Sheets 的缩写） 的本质。
更多用法：less 官网：http://lesscss.org/
一、如何使用
使用 node 的 npm 安装使用：
npm install -g less
> lessc styles.less styles.css
另外给大家提供一个less-to-css在线实时编译的网站：http://lesscss.org/less-preview/
less 主要涉及的要点：变量，混合，嵌套，函数&运算，扩展。
二、变量
- less 通过
@来定义变量；如：@color:#333; - 变量作为属性变量和字符串变量使用时，注意必须加一个大括号
body{
/* 定义一个变量 */
@property: background-color;
/* 变量作为key使用要加花括号 */
@{property}: red;
/* 定义一个变量 */
@border: "solid red";
/*变量在字符串中使用也的加花括号 */
/* ~字符串函数是字符串函数，把 "1px solid red" => 1px solid red */
border: ~"1px @{border}";
}
编译之后的 CSS：
body {
/* 定义一个变量 */
/* 变量作为key使用要加花括号 */
background-color: red;
/* 定义一个变量 */
/*变量在字符串中使用也的加花括号 */
/* ~字符串函数是字符串函数，把 "1px solid red" => 1px solid red */
border: 1px solid red;
}
三、混合（Mixin）['mɪksɪŋ] （类似函数）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
- 无参数情况
.cur{
-webkit-transform:rotate(-10deg); /*为Chrome/Safari*/
-moz-transform:rotate(-10deg); /*为Firefox*/
-ms-transform:rotate(-10deg); /*为IE*/
-o-transform:rotate(-10deg); /*为Opera*/
transform:rotate(-10deg);
}
main{
margin:10px;
border-radius: 5px;
width: 100px;
height: 100px;
background-color: #cfc;
.cur
}
- 有参数情况
.cur(@color){
background-color:@color;
width: 100px;
height: 100px;
}
div{
.cur(#0fc)
}
四、嵌套（Nesting）
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。模仿了 HTML 的组织结构。
.header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。& 运算符表示嵌套规则的父选择器,在修改类或伪类及伪元素时常用。
main{
width: 100px;
height: 100px;
background-color: #fcf;
&::after {
content: "我是伪类";
display: block;
font-size: 10px;
}
}
五、注释（Comments）
单行注释和多行注释都可以使用：
// 会被删除
/**/ 不会被删除
有图为证：
六、循环
常用的分为两种：
- 条件循环♻️
when加递归 => 循环
less 原文件：
/* 定义一个条件循环 */
.loop(@n) when (@n<=3){
.col-@{n}{
a: b;
}
/* 递归调用 */
.loop(@n + 1);
}
/* 调用 */
.loop(1);
编译之后的 CSS 代码：
/* 定义一个条件循环 */
/* 调用 */
.col-1 {
a: b;
}
/* 递归调用 */
.col-2 {
a: b;
}
/* 递归调用 */
.col-3 {
a: b;
}
/* 递归调用 */
利用这东东，我们就能用 less 的变量结合循环写出一个类似的栅格系统：
.loop(@n) when (@n<=24){
.col-@{n}{
float:left;
width:@n / 24 * 100 + 0%;
}
.loop(@n + 1);
}
.loop(1);
编译完成的 css 为：
.col-1 {
float: left;
width: 4.16666667%;
}
.col-2 {
float: left;
width: 8.33333333%;
}
.col-3 {
float: left;
width: 12.5%;
}
.col-4 {
float: left;
width: 16.66666667%;
}
.col-5 {
float: left;
width: 20.83333333%;
}
.col-6 {
float: left;
width: 25%;
}
.col-7 {
float: left;
width: 29.16666667%;
}
.col-8 {
float: left;
width: 33.33333333%;
}
.col-9 {
float: left;
width: 37.5%;
}
.col-10 {
float: left;
width: 41.66666667%;
}
.col-11 {
float: left;
width: 45.83333333%;
}
.col-12 {
float: left;
width: 50%;
}
.col-13 {
float: left;
width: 54.16666667%;
}
.col-14 {
float: left;
width: 58.33333333%;
}
.col-15 {
float: left;
width: 62.5%;
}
.col-16 {
float: left;
width: 66.66666667%;
}
.col-17 {
float: left;
width: 70.83333333%;
}
.col-18 {
float: left;
width: 75%;
}
.col-19 {
float: left;
width: 79.16666667%;
}
.col-20 {
float: left;
width: 83.33333333%;
}
.col-21 {
float: left;
width: 87.5%;
}
.col-22 {
float: left;
width: 91.66666667%;
}
.col-23 {
float: left;
width: 95.83333333%;
}
.col-24 {
float: left;
width: 100%;
}
我们就能在 HTML 直接使用 class 类来调用。
<div class="col-1">1</div>
<div class="col-10">2</div>
<div class="col-10">3</div>
<div class="col-3">4</div>
效果图：
-
each函数，一般结合list列表使用
用过 JS 的 forEach 相信你一眼就能看懂 ，each 方法的使用。
/* 第一种用法 */
/* 定义一个列表 */
@list: 1, 2, 3, 4;
/* each 循环，默认三个参数 value ，key， index 用你的情商也知道这三个是干啥的了 */
each(@list, {
.btn-@{value} {
@{key}: @index;
}
})
/* 第二种用法 */
@set: {
one: blue;
two: green;
three: red;
}
/* 同上 */
each(@set, {
.btn-@{value} {
@{key}: @index;
}
})
编译完成的 css 为：
/* 第一种用法 */
/* 定义一个列表 */
/* each 循环，默认三个参数 value ，key， index 用你的情商也知道这三个是干啥的了 */
.btn-1 {
1: 1;
}
.btn-2 {
2: 2;
}
.btn-3 {
3: 3;
}
.btn-4 {
4: 4;
}
/* 第二种用法 */
.btn-blue {
one: 1;
}
.btn-green {
two: 2;
}
.btn-red {
three: 3;
}
