学会less，这一篇就够了。
前面我们学习和接触的都是PC端，今天我们来了解一个不同的界面——移动端，它和PC端的编译有什么不同呢，我们一起来看看吧！
文章目录
前言
less是⼀种动态样式语⾔，属于css预处理器的范畴，它扩展了 CSS 语⾔，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
而css作为⼀⻔标记性语⾔，给初学者的第⼀印象是简单易懂，毫⽆逻辑，不像编程该有的样⼦。语法更新时，浏览器的兼容问题⽐较麻烦，问题的诞⽣伴随着技术的兴起，在web发展的这⼏年，出现了预处理语⾔，让css彻底变成了⼀⻔可以使⽤变量、循环、继承、⾃定义⽅法等多种特性的标记语⾔， 逻辑性得以⼤⼤增强
一、预处理语言的诞生
其中常⽤的三⻔语⾔：Less、Sass、Stylus
（1）:sass诞⽣于2007年，Ruby编写，语⾔功能⼗分全⾯，国内外都很受欢迎，它的项⽬团队也很强 ⼤，是⼀款⼗分优秀的预处理语⾔
（2）： stylus诞⽣于2010年，来⾃Node.js社区，语法功能和sass不相伯仲
（3）:Less诞⽣于2009年，受Sass影响的⼀个开源项⽬，增加了变量，混合，函数等功能，让css更 易维护，⽅便制作主体，扩充
二、使用步骤
1.、安装使⽤less vscode 插件 Easy LESS 插件
2.HBuilderX 安装插件
3.引⼊⽅法：运⾏时编译 这种编译⽅式不好，编译⻚⾯时，将less转成css，会影响，⽹站的性能
注释：
1 //写法⼀：这是less的注释，css看不⻅,不会被编译到css⽂件中
2 /*写法⼆： 这是css的注释，css⽂件可以看到，会被编译到css⽂件中*/
3 *{
4 margin: 0;
5 padding: 0;
}⼆、变量
1、普通变量：
语法：@变量名：样式值 作为普通属性值只来使⽤：直接使⽤@变量名
代码如下（示例）：
// 定义变量1
2 @color:yellow;
3 @width:300px;
4 @height:300px;
5 #wrap{
6 width:@width;
7 height: @height;
8 border: 1px solid;
9 background-color: @color;
10 margin: 0 auto;
11 }2、变量作为选择器或者属性名
// 声明selector对应#wrap
2 @selector:#wrap;
3 @w:width;
4 @h:height;
5 @{selector}{//使⽤时变量名必须使⽤⼤括号包裹
6 @{w}:@width;
7 @{h}: @height;
8 border: 10px double black;
9 background-color:@color ;
10 margin: 0 auto;
11 }3、变量作为url
@url:"../img/img1.png";//定义图⽚引⼊路径
2 @selector:wrap;
3 @color:red;
4 .@{selector}{
5 width: 200px;
6 height: 200px;
7 background-color:@color;
8 background: url(@url) no-repeat;
9 background-size: cover;
10 }
4.变量延迟加载
@var: 0px;
2 // 变量是块级作⽤域，⼀个括号代表⼀个作⽤域
3 .class {//⼀个作⽤域
4 @var: 10px;
5 .brass {//⼀个作⽤域
6 @var: 20px;
7 width: @var; // width: 30px; 读完块级作⽤域后，再去确定变量值
8 @var: 30px;
9 }
10 width: @var; //width：10px；
11 }三、嵌套规则
1.基本嵌套规则
2..&的使⽤
ul{
2 width: 400px;
3 li{
4 width: 25%;
5 a{
6 color: white;
7 }
8 // &表示上⼀级选择器
9 &:hover{
10 background-color:tomato;
11 }
12 }
13 }四、混合
混合就是将⼀系列属性从⼀个规则集引⼊到另⼀个规则集的⽅式(ctrl c +ctrl v) 混合的定义，在less规则，明确指定.的形式来定义
1.普通混合 （会编译到原⽣css中）
// 定义的base普通混合，less编译为css⽂件后，会在css中显示
2 .base{
3 width: 100px;
4 height: 100px;
5 margin-bottom: 10px
6 }
7 #box1{
8 .base;
9 background: pink;
10 }
11 #box2{
12 .base;
13 background: deeppink;
14 }2.不带输出的混合
// 语法：.base() 不会在css中输出混合
2 .base(){
3 width: 100px;
4 height: 100px;
5 margin-bottom: 10px
6 }
7 #box1{
8 .base;
9 background: pink;
10 }
11 #box2{
12 .base;
13 background: deeppink;
14 }3.带参数的混合
//带参数的混合
2 // ⾏参
3 .base(@w,@h,@color){
4 width: @w;
5 height: @h;
6 background-color: @color;
7 margin-bottom: 10px
8 }
9 // 以下传⼊实参
10 #box1{
11 .base(100px,100px,red);
12 }
13 #box2{
14 .base(200px,200px,pink);
15 }4.带参数并且有默认值的混合
//带参数的混合
2 // ⾏参
3 .base(@w:100px,@h:100px,@color:yellow){
4 width: @w;
5 height: @h;
可以定义⼀个混合库minx.less，在实际写less的时候，然后引⼊混合库
6 background-color: @color;
7 margin-bottom: 10px
8 }
9 // 以下传⼊实参，参数是⼀⼀对应的，不能不写
10 #box1{
11 .base(100px,100px,red);
12 }
13 #box2{
14 .base(200px,200px,pink);
15 }
16 #box3{
17 .base;
18 }5.命名混合
1 .base(@w:100px,@h:100px,@color:yellow){
2 width: @w;
3 height: @h;
4 background-color: @color;
5 margin-bottom: 10px
6 }
7 //写了命名混合的，就对应哪个变量，剩余的再对应
8 #box1{
9 .base(@w:200px,@color:red);
10 }
11 #box2{
12 .base(@w:200px,150px,red);
13 }
14 #box3{
15 .base;
16 }6.匹配模式
可以定义⼀个混合库minx.less，在实际写less的时候，然后引⼊混合库
//定义混合库
2 // @_ 每次调⽤arrows的时候，都调⽤它
3 .arrows(@_,@w,@C){
4 width: 0;
5 height: 0;
6 border-style:solid;
7 }
8 // 参数⼀：匹配的名字
9 .arrows(Top,@w,@C){
10 border-color: @C transparent transparent transparent;
11 border-width:@w;
12 }
13 .arrows(Right,@w,@C){
14 border-color: transparent transparent transparent @C;
15 border-width:@w;
16 }
17 .arrows(Bottom,@w,@C){
18 border-color: transparent transparent @C transparent;
19 border-width:@w;
20 }
21 .arrows(Left,@w,@C){
22 border-color: transparent @C transparent transparent;
23 border-width:@w;
24 }
1 // 引⼊minx库，两种⽅式都可以
2 // @import url(./minx.less);
3 @import './minx.less';
4 #arrows{
5 .arrows(Right,@w:40px,@C:red)
6 }7.arguments变量
.border(@w,@style,@c){
2 border: @arguments;// 等价于 border: @w @style @c;
3 }
4 #wrap{
5 width: 200px;
6 height: 200px;
7 background: pink;
区别与混合，混合是复制粘贴，继承最后可以合并css代码，⽤并集选择器
性能⽐混合⾼，灵活度⽐混合低
8 .border(10px,solid,red);
9 }五、运算
@w:100px;
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 #wrap{
7 // 计算的双⽅，只要⼀⽅有单位就可以了
8 // + - * /
9 width:@w+200;
10 height: 200px;
11 background: pink;
12 }六、避免编译
*{
2 margin: 0;
3 padding: 0;
4 }
5 #wrap{
6 //calc()是css3的⼀个新增的功能，⽤来指定元素的⻓度
7 // ～'' less不编译，原封不动，交给css编译
8 width:~"calc(200px + 700px)";//css中显示 width: calc(200px + 700px);
9 height: 100px;
10 background-color: red;
11 }七、继承
区别与混合，混合是复制粘贴，继承最后可以合并css代码，⽤并集选择器 性能⽐混合⾼，灵活度⽐混合低
//先定义公⽤的less库
2 .juzhongMix{
3 position: absolute;
4 left: 0;
5 right: 0;
6 top: 0;
7 bottom: 0;
8 margin: auto;
9 }
10 .juzhongMix:hover{
11 background-color: red;
12 }
1 //然后使⽤继承，编写less
2 *{
3 margin: 0;
4 padding: 0;
5 }
6 @import url(./mixin.less);
7 #wrap{
8 position: relative;
9 width: 300px;
10 height: 300px;
11 border: 1px solid red;
12 #box1{
13 //1、 继承.juzhongMix样式，
14 &:extend(.juzhongMix);
15 width: 100px;
16 height: 100px;
17 background-color: pink;
18 }
19 #box2{
20 //2、 继承.juzhongMix所有相关的样式
21 &:extend(.juzhongMix all);
22 width: 50px;
23 height: 50px;
24 background-color: yellow;
25 }
26 }
1 //最终编译的css⽂件如下
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 //重复部分⽤了并集选择器
7 .juzhongMix,
8 #wrap #box1,
9 #wrap #box2 {
10 position: absolute;
11 left: 0;
12 right: 0;
13 top: 0;
14 bottom: 0;
15 margin: auto;
16 }
17 .juzhongMix:hover,
18 #wrap #box2:hover {
19 background-color: red;
20 }
21 #wrap {
22 position: relative;
23 width: 300px;
24 height: 300px;
25 border: 1px solid red;
26 }
27 #wrap #box1 {
28 width: 100px;
29 height: 100px;
30 background-color: pink;
31 }
32 #wrap #box2 {
33 width: 50px;
34 height: 50px;
35 background-color: yellow;
36 }
37总结
以上就是我今天要分享的内容呀，有哪里不清楚的可以私信我或者留言评论区呀，我们一起学习，一起进步，最后祝屏幕前的你生活愉快呀~~~
748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
