可编程Css-Less详解

Less

Less是一门Css预处理语言，增加了变量、Mixin（混合）、函数、结构化等特性、使css更容易维护，并扩展css功能。Less可以通过webpack，cdn映入js，Vscode插件，koala，等方式使用，编写的Less会最终被解析为css在浏览器中运行，大家可以自行百度。

1.变量

在Less中新增了变量这一特性，可以将公有的路径，数值，属性，甚至选择器封装到一个变量中，供全局使用，使css代码更简介。

//定义变量

//1.普通变量  "color"变量中存入了"pink"值
@color:pink;

//2.定义属性 height "h"变量中存入了"height"值
@h:height;

//3.将选择器当作变量 "selector"变量中存入了类选择器 ".class"
@selector:.class;

//4.存储路径
 @url: "../img";//需要加引号
//定义属性，选择器，路径 需要用{}将变量包起来  类似ES6 `` 模板字符

//使用定义的变量
div{
    //此句 =  background-color: pink;
    background-color: @color;
    //此句 = height: 200px;
    @{h}:200px;
}
@{selector}{
    color: red;
    background: url("@{url}/dog.png");
}

//经过编译后的css代码
div{
	background-color: pink;
	height: 200px;
}
.class{
 	color: red;
        background: url("../img/dog.png");
}

2.嵌套

在不改变html代码层级关系的情况下，更加直观的书写css代码，同时大量减少css代码的书写。
下面我们实现一个 子盒子水平垂直居中 的经典案例来展示代码的层级关系
html代码：

Less代码

//为父盒子设置宽高200，1px的黑色边框，利用flex实现简单的水平垂直居中
.father{
    border: 1px solid #ccc;
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .son{
        background-color: pink;
        width: 50px;
        height: 50px;
        &:hover{ //在此处表示与son同级  .son:hover{ }
            background-color: red;
        }
    }
}

注意&符，代表的上一层选择器的名字

//经过编译后的css代码
.father {
  border: 1px solid #ccc;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.father .son {
  background-color: pink;
  width: 50px;
  height: 50px;
}
.father .son:hover {
  background-color: red;
}

如上述例子，父盒子与子盒子的嵌套关系在less代码中更加直观，同时避免书写更多的后代选择器 节省代码量

3.混合

类似js中的函数， 但要以特定格式属性 .mixin(参数)

无参数混合

//定义一个无参数混合
.style(){
    background-color: pink;
    width: 50px;
    height: 50px;
    
}

//在less中使用
.father{
	.style()//直接调用  和js函数调用很像
	.son{
		.style()
	}
}

//编译后的css代码
.father{
    background-color: pink;
    width: 50px;
    height: 50px;
}
.father .son{
		 background-color: pink;
   		 width: 50px;
    		height: 50px;
	   }

在混合中的css代码直接被复制到引用其混合的作用域中，
可以理解为 通过函数的方式，将公用的css代码封装起来 通过调用混合 来引入
像不像js中面向对象共有方法共享的方式

带参数混合

类似js中的函数传参，传参可以是多个，也可以是单个

//带参混合
//定义混合
.style(@height,@color){//定义需要传递两个参数的混合
	height:@height;
	color:@color;
}

//调用
div{
	.style(100px,red)//在没有指定默认参数的情况下 不能为空
}


//编译后的css代码
div{
	height:100px;
	color:red;
}

与js函数传参很像，但是在没有指导默认参数的情况下会报错 需注意

带参数默认值的混合

混合也可以在定义是设置默认参数，与Es6中定义函数默认值类似

//定义混合
.style(@height:200px,@color:blue){//定义需要传递两个参数的混合
     //当调用时没有传递对应值，默认为200px与blue
	height:@height;
	color:@color;
}

//与es6中定义函数参数默认值相似
function func(a=1,b=2){
	return a+b;
}
func()//不传参时 结果为3 传参时，以传参为准

传单个值指定参数
在调用混合时，可以一个使用默认值，一个指定值，单个值传递时绑定传递对象即可

//定义混合
.style(@height:200px,@color:blue){//定义需要传递两个参数的混合
     //当调用时没有传递对应值，默认为200px与blue
	height:@height;
	color:@color;
}

//调用
div{
	.style(@color:red)//只将red传递给混合，heights使用默认值，无需担心参数顺序问题，参数绑定
}

通过参数绑定，将red值绑定给@color变量。

Less混合中的 arguments

与js函数中的arguments相同，用以获得所有实参，用法上更解决 Es6 …扩展符

.style(@height:200px,@color:blue){//定义需要传递两个参数的混合
   height:@height;
   color:@color;
   border: @arguments; // 获得所有参数，在此处解析为 200px red
}
div{
    .style(@color:red)
}


//编译后的代码
div {
  height: 200px;
  color: red;
  border: 200px red;//完成解析
}

计算属性

与css3中的calc(）方法基本相同

div{
	width:(100 + 100px);//like: width:calc(100px + 100px)
	height:(100px +100px)
}

//编译后
div{
	width:200px;
	height:200px;
}

以上就是Less中的常用语法，在实际开发中运用Less能减少很多工作，同时能让css代码具有层次结构。