文章地址：https://www.cnblogs.com/sandraryan/
之前就了解过less，但项目一直用的是css，所以，重新做一次系统的了解，顺便写个博客Orz
简介
less和sass都是css的预处理语言，最常用于bootstrap
less 是基于js的，在客户端处理（编译less文件）
sass基于ruby，在服务器端处理
less安装引入
另一种引入方法是直接下载 （指路：官网），或者cdn引入
举个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box"> <p class="p1">test p</p> </div> <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script> <script></script> </body> </html>
html文件里引入css文件（这个css文件是less文件编译产生的，vscode自动编译），引入cdn的less文件
less 文件
@blue: lightblue; .p1 { background-color: @blue; }
less文件（具体后续再解释~）
编译后的css文件：
.p1 { background-color: lightblue; }
以上 一个简单的demo~~~~
变量
普通变量
@blue: lightblue; .p1 { background-color: @blue; }
👆 @blue 是定义的一个新变量，名字为blue，值为lightblue
在调用的时候，直接用变量名调用
选择器变量
选择器可以被声明为变量，调用时在前面加类型（.或者#），调用的时候要加上{}
@blue: lightblue; @p1 : p1; .@{p1}{ color: @blue; }
声明选择器变量的时候也可以直接声明某种类型的选择器
@p2 : .p2; @{p2} { color: red; }
属性变量
属性名也可以被声明为变量，也要用{}调用
@b: border; .p3 { @{b}: 1px solid red; }
url变量
我怕觉得这个超好用der， 把一个路径给一个变量，如果整个项目和img的相对路径发生变化，直接修改变量就可以了
举个栗子
@img : '../../img'; .p1 { background-image : url('@{img}/1.jpg'); } .p1 { background-image : url('@{img}/2.jpg'); }
申明变量
我的理解是，可以利用申明变量定义多条样式，调用时加上()
@pre: { width: 100px; height: 100px; border: 1px solid red; } .p1 { @pre(); }
变量的计算
在计算的时候，加减法以第一个数据的单位为基准，称出务必保持单位统一
颜色也可以计算~~~
@w : 200px; @c : #333; .p2 { width: 200px * 2; color: @c * 2; border: 1px solid green; }
转换为css样式是
.p2 { width: 400px; color: #666666; border: 1px solid green; }
可见注释 隐藏注释
也就是说 //后面的代码注释仅在less文件中可见，转换为css文件不可见
/* you can see me */ // u can't see me
转换为css
/* you can see me */
变量套娃😁
@c1 : 'hi,c1'; @c2 : 'c1'; .p3::before{ content : @@c2; }
转为css
.p3::before { content: 'hi,c1'; }
less嵌套
less选择器是可以嵌套的，可以根据不同的块，使用不同样式，有利于代码维护，使css不容易互相影响
嵌套的时候，内层选择器前面的 & 符号就表示对父选择器的引用。 （& === 父元素）
在一个内层选择器的前面，如果没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="box1 box1_f"> <p class="p1">111</p> <p class="p2">222</p> <p class="p3">333</p> <p class="p4">444</p> </div> <div class="box2"> <p class="p1 box1_f">111</p> <p class="p2">222</p> <p class="p3">333</p> <p class="p4">444</p> </div> <script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script> </body> </html>
less
.box1 { .p1 { // p1 被解析为box1 的后代p1 color: red; } } .box1 { // 在box1 后插入content内容 &:after{ content: 'hello, after box1'; } &_f { font-size: 20px; text-decoration: underline; } }
css
.box1 .p1 { color: red; } .box1:after { content: 'hello, after box1'; } .box1_f { font-size: 20px; text-decoration: underline; }
嵌套的less样式会覆盖为嵌套的（原理和cs选择器一样）
.box1 { .p1 { // p1 被解析为box1 的后代p1 color: red; } } .p1 { color: yellow; }
box1下的p1 红色， box2 下的p1黄色 👆
媒体查询
@media screen { @media (max-width : 768px){ .box1 { width: 700px; border: 1px solid green; } } @media (min-width: 770px){ .box1 { width: 100%; border: 2px solid red; } } }
css:
@media screen and (max-width: 768px) { .box1 { width: 700px; border: 1px solid green; } } @media screen and (min-width: 770px) { .box1 { width: 100%; border: 2px solid red; } }
↑ 在屏幕状态下，宽度小于768px，box1 使700px且1px绿色边框，屏幕大于770， 100%宽度，红色边框
less方法
less声明的方法可以传参，声明方法可以用.和#，声明的方法可以传参，也可以有默认参数，调用时加上()，使用默认形参的话，不加也可以
举个例子
.wh(@w:10px,@h:10px){ width :@w; height:@h; } .b(@a:1px,@b:solid,@c:red){ border: @a @b @c; } .box1 { .wh(60px,30px); .b(); } .box2 { .wh(60px,40px); .b(3px,dotted,green); }
css：
.box1 { width: 60px; height: 30px; border: 1px solid red; } .box2 { width: 60px; height: 40px; border: 3px dotted green; }
less方法还是很好用的~~~
less方法同时支持不定参
在定义这个方法之前，只有上帝知道后期要传几个参数
@arguments 是当前方法的参数列表 不定参用...表示
.e (...){ box-shadow : @arguments; } .box3 { .e(1px,4px,10px,blue); }
转换后 css
.box3 { box-shadow: 1px 4px 10px blue; }
吃个饭
回来再写。。。。