目录
Less
less是一门CSS预处理器，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。less可以在Node或浏览器端运行。
本人使用的开发环境为vscode，可直接通过该环境编译less文件
注释
以 // 开头的注释不会被编译到css文件中
以 /**/ 包裹的注释为被编译到css文件中
变量
使用 @ 来声明一个变量：@color:pink;
1.作为普通属性来使用：@变量名
2.作为选择器和属性名：@{变量名}
如：
@color:pink;
@m:margin;
@selector:wrap;
*{
@{m}: 0;
padding: 0;
}
@{selector}{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: @color;
height: 100px;
width: 100px;
}
}
3.作为URL：@{url}
4.变量的延迟加载
如：
@var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var; //3
@var:3;
}
one:@var; //1
}
嵌套规则
通过使用 & 来表明是否为平级关系
如：less语句
@color:pink;
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: @color;
height: 100px;
width: 100px;
&:hover{
background: deeppink;
}
}
}
编译后的css语句：
* {
margin: 0;
padding: 0;
}
#wrap {
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: #ffc0cb;
height: 100px;
width: 100px;
}
#wrap .inner:hover {
background: deeppink;
}
混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
普通混合（编译到原生的css中）
.juzhong{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: pink;
height: 100px;
width: 100px;
}
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong;
}
.inner2{
.juzhong;
}
}
不带参数的混合
.juzhong(){
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: pink;
height: 100px;
width: 100px;
}
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong;
}
.inner2{
.juzhong;
}
}
带参数的混合
.juzhong(@w,@h,@c){
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: @c;
height: @h;
width: @w;
}
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong(200px,200px,deeppink);
}
}
带默认值的混合
给参数赋予个默认值
.juzhong(@w:10px,@h:10px,@c:pink){
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: @c;
height: @h;
width: @w;
}
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong();
}
}
命名参数
当实参和形参个数不匹配时，指定该实参是赋给哪个形参
.juzhong(@w:10px,@h:10px,@c:pink){
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: @c;
height: @h;
width: @w;
}
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong(@c:black);
}
}
匹配模式
三角形
less代码：
使用相同名称的混合若参数为'@_'，则调用混合时会现执行带'@_'的混合，再执行调用的混合
.triangle(@_){
width: 0px;
height: 0px;
overflow: hidden;
}
.triangle(L,@w,@c){
border-width: @w;
border-style:dashed solid dashed dashed;
border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
border-width: @w;
border-style:dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
.triangle(T,@w,@c){
border-width: @w;
border-style:dashed dashed solid dashed;
border-color:transparent transparent @c transparent;
}
.triangle(B,@w,@c){
border-width: @w;
border-style: solid dashed dashed dashed;
border-color: @c transparent transparent transparent;
}
less应用语句：
@import "./triangle.less";
#wrap .sjx{
// .triangle();
.triangle(R,40px,yellow);
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/03匹配模式.css"/>
</head>
<body>
<div id="wrap">
<div class="sjx">
</div>
</div>
</body>
</html>
arguments变量
.border(@1,@2,@3){
border:@arguments;
}
#wrap .sjx{
.border(1px,solid,black);
}计算
在less中可以进行加减乘除运算
计算的双方，只需要有一方带单位
#wrap .sjx{
width:(100+100px);
}继承
juzhong-extend.less语句：
.juzhong{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover{
background: red!important;
}
extend.less语句：
*{
margin: 0;
padding: 0;
}
@import "mixin/juzhong-extend.less";
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
&:extend(.juzhong all);
&:nth-child(1){
width: 100px;
height: 100px;
background: pink;
}
&:nth-child(2){
width: 50px;
height: 50px;
background: deeppink;
}
}
}
extend.css语句：
* {
margin: 0;
padding: 0;
}
.juzhong,
#wrap .inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover,
#wrap .inner:hover {
background: red!important;
}
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner:nth-child(1) {
width: 100px;
height: 100px;
background: pink;
}
#wrap .inner:nth-child(2) {
width: 50px;
height: 50px;
background: deeppink;
}
extend.html语句：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/extend.css"/>
</head>
<body>
<div id="wrap">
<div class="inner">
inner1
</div>
<div class="inner">
inner2
</div>
</div>
</body>
</html>
避免编译
less代码：
*{
margin: 100 *10px;
padding: ~"cacl(100px + 100)";
}
编译后的css代码：
* {
margin: 1000px;
padding: cacl(100px + 100);
}
