这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天 Less是一种动态样式语言；为提高css应用的灵活性和效率， LESS将cSS赋予了动态语言的特性，如变量，继

承，运算，函数。LESS既可以在客户端上运行（支持IE 6+， Webkit， Firefox），也可以借助Node.js在服务端运行。

Less的安装

在node.js环境中使用less

npm install -g less

在浏览器环境中使用less

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

在vscode中使用less需要先安装插件EasyLess

Less的使用

注释

less的注释有两种

//这种注释，在编译后不会出现在CSS文件上
/*这种注释，编译后会出现在CSS文件上*/

less变量

我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护。理想状态，应是下面这样：

const bgcolor="skyblue";
$(". post-content"). css("background-color", bgcolor);
$("# wrap"). css("background-color", bgcolor);
$(". arctive"). css("background-color", bgcolor);

只要我们修改bgcolor这一个变量，整个页面的背景颜色都会随之改变。而Less中的变量十分强大，可化

万物，值得一提的是，其变量是常量，所以只能定义一次，不能重复使用。

值变量（样式变量）

@color:#999;
@bgcolor:skyblue；//不要添加引号
@width:50%；
#wrap{
color:@color;
  background:@bgcolor;
  width:@width;
  }

以@开头 定义变量，并且使用时 直接 键入@名称。在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

#wrap {
  color: #999;
  background: skyblue; 
  width: 50%;
}

@lightPrimarycolor: #c5cae9;
@textPrimarycolor: #fff;
@accentcolor: rgb(99, 137, 185);
@primaryTextcolor: #646464;
@secondaryTextcolor: #000;
@dividercolor: #b6b6b6;
@borderColor: #dadada;

选择器变量

作用：让选择器变成动态

@myselector:#wrap;
@wrap:wrap;

@{myselector}{ //变量名必须使用大括号包裹
color: #999;
width:50%;
}
.@{wrap}{
color:#ccc;
}
#@{wrap}{//和第一种等效，只是不同写法
color:#666;
}

#wrap {
color: #999;
width:50%;
}
.wrap {
color:#ccc;
}
#wrap {
color:#666;
}

属性变量

/*Less*/
@borderstyle:border-style;
@soild:solid;
#wrap{
@{borderstyle}:@soild;//变量名必须使用大括号包裹
}

#wrap{
border-style:solid;
}

url变量

@images: "../img";//需要加引号
body {
background:url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

body {
background: url("../img/dog. png");
}

声明变量

有点类似于下面的混合方法：

结构：@name:{属性：值；}；

使用：@name（）；

@background: {background:red;};
#main{
  @background();
}

@Rules:{
  width: 200px;
  height: 200px;
  border: solid 1px red;
};
#con{
  @Rules();
}

变量运算

不得不提的是，Less的变量运算十分强大。

加减法时 以第一个数据的单位为基准，并且运算符要加空格

乘除法时 注意单位一定要统一

@width:300px;
@color:#222; 
#wrap{
  width:@width - 20;
  height:@width - 20*5;
  margin: (@width - 20)*5; 
  color:@color*2; 
  background-color:@color + #111;
}

#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}

变量的作用域

一句话总结就是就近原则，并且是块级作用域

@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}

#wrap {
width: 9%;
}

less嵌套

&的妙用

&：代表的上一层选择器的名字，此例便是 header。

#header{
&::after{
    content:"Less is more！";
  }
.title{
  font-weight:bold;
  }
&_content{//理解方式：直接把&替换成#header
margin:20px;  م
}
}

#header::after{
  content:"Less is more！";
}
#header .title{ //嵌套了
font-weight:bold;
}

#header_content{//没有嵌套！
margin:20px;
}

&后面加空格再加.类名和不加空格.类名的区别

&后面加空格.后面的类名会作为&的子类渲染；比如：

.parent {
    div {
        & .child {
            color: red;
        }
    }
}

上面的代码会渲染成：

.parent div .child {
    color: red;
}

不加空格是作为属性使用的，比如：

.parent {
    div {
        &.child {
            color: red;
        }
    }
}

上面的代码会渲染成：

.parent div.child {
    color: red;
}

可以看到，& 加空格后，样式的后代选择器更的明确更规矩，更能避免可能出现的复杂样式冲突，所以最好还是 & 加空格来使用比较好，这种情况下，& 可以类比于父类

媒体查询

在以往的工作中，我们使用 媒体查询，都要把一个元素分开写：

#wrap{
width:500px;
}
@media screen and (max-width:768px){
  #wrap{
  width:100p;
  }
}

Less提供了一个十分便捷的方式：

# main{
//something...
@ media scren{
  @ media (max-width:768px){
    width:100px;
   }
}
@ media tv {
  width:2000px;
  }
}

@media screen and (maxwidth:768px){
#main{
width:100px;
  }
}
@media tv{
#main{
width:2000px;
  }
}

唯一的缺点就是每一个元素都会编译出自己@media声明，并不会合并。

在元素中定义自己的私有样式。

#main{
// something..
& .show{
display:block;
  }
}
.show{
  display:none;
}

const main = document. getElementById("main"); 
main. classList. add("show");

#main .show{
  display:block;
}
.show{
  display:none; //会被覆盖。
}

混合方法

无参数方法

方法犹如声明的集合，使用时直接键入名称即可。

.card{//等价于.card()
  background:#f6f6f6;
  -webkit-box-shadow:O 1px 2px rgba(151,151,151,.58);
  box-shadow:0 1px 2px rgba(151,151,151,.58);
  .card;//等价于.card();
}

#wrap{
background：#f6f6f6;
-webkit-box-shadow:O 1px 2px rgba(151,151,151,.58);
  box-shadow:0 1px 2px rgba(151,151,151,.58);
}

其中.card 与.card（）是等价的。个人建议，为了避免 代码混淆，应写成：

.card(){
//something...
}
#wrap{
.card();
}

要点：

.与#皆可作为方法前缀。

方法后写不写（）看个人习惯。

默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。

@arguments犹如JS中的arguments指代的是全部参数。

传的参数中必须带着单位。

.border（@a:10px,@b:50px,@c:30px, @color:#000） {
border:solid 1px @color;
box-shadow:@arguments;//指代的是全部参数
}
#main{
.border(0px, 5px, 30px,red);//必须带着单位
}
#wrap{
.border(0px);
}م
#content{
.border;//等价于 .border()
}

方法的匹配模式

与面向对象中的多态很相似

声明的时候可以有同个函数不同参数，实际调用的时候看传的参数符合哪个就调用哪个

@_ 的意思是可以用来引用所有传入的参数列表，相当于可变参数的意思。