less

安装less

先在页面用link引入引入.less文件，并把rel属性更改为stylesheet/less，然后再引入less.js文件，可用官网的包，也可用本地的。这里位置是需要区分的，即先style.less,后less.js(而且得是服务器环境)。

<link rel="stylesheet/less" href="style.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

接下来就可以使用了。

值变量

经常在css中看到一个值重复多次，比如某个颜色，整个网站都是这个主题色，比如淘宝的 #f40，这里可以将它定义成一个变量，然后在需要的地方引入变量，这样即使后期更改，只要更改这个变量的值，整个页面颜色都随之更改。

//---定义---
@default-color: #f40; //这里使用@开头定义，并且一定要以分号结尾
@font-color: #333;
@font-size-small: 12px;
@width: 200px;

//---使用---
p{
  color: @default-color;
  font-size: @font-size-small;
}

//---相当于---
p{
  color: #f40;
  font-size: 12px;
}

选择器变量

选择器变量让选择器也变成动态

//---定义---
@myselector: #wrap;
@wrap: wrap;

//---使用---
@{myselector}{   // 使用时变量名须用大括号包裹
  color:skyblue;
}
.@{wrap}{
  font-size: 26px;
}
#@{wrap}{   // 使用时变量名须用大括号包裹
  font-style: italic;
}

//---相当于---
#wrap{
  color:skyblue;
}
.wrap{
  font-size: 26px;
}
#wrap{
  font-style: italic;
}

属性变量

//---定义---
@fontSize: font-size;

//---使用---
p{
  @{fontSize}: 26px;   // 使用时变量名须用大括号包裹
}

//---相当于---
p{
  font-size: 26px;
}

url路径

项目结构改变时，修改其变量即可。

//---定义---
@images: "../img";   // 这里使用引号

//---使用---
body{
  background: url("@{images}/blue.jpg");
  background-size: cover;
}

//---相当于---
body{
  background: url("../img/blue.jpg");
  background-size: cover;
}

变量声明

//---语法---
 - 结构: @name: { 属性: 值 ;};
 - 使用：@name();

//---定义---
@background: {background: skyblue;};

//---使用---
p{
  @background();
}

//---相当于---
p{
  background: red;
}

变量运算

less的变量运算十分强大

//---定义---
@width: 300px;
@color: #222;

//---使用---
p{
  height: @width+100;
  width: @width+100;
  background: @color+#111;
}

//---相当于---
p{
  width: 400px;
  height: 400px;
  background: #333;
}

变量作用域

就近原则

//---定义---
@var: @a;
@a:skyblue;

//---使用---
p{
  background-color: @var;
  @a:red;
}

//---相当于---
p{
  background-color: red;
}

嵌套书写

&：代表的上一层选择器的名字

.box{
  width: 100px;
  background-color: skyblue;
  p{
    color: red;
  }
  &:after{
    content: "hello";
  }
}

//---相当于---
.box{
  width: 100px;
  background-color: skyblue;
}
.box p{
  color: red;
}
.box::after{
  content: "hello";
}