学会less，这一篇就够了。

前面我们学习和接触的都是PC端，今天我们来了解一个不同的界面——移动端，它和PC端的编译有什么不同呢，我们一起来看看吧！

文章目录

前言
文章目录

前言

一、预处理语言的诞生

二、使用步骤

1.、安装使⽤less vscode 插件 Easy LESS 插件

2.HBuilderX 安装插件

3.引⼊⽅法：运⾏时编译这种编译⽅式不好，编译⻚⾯时，将less转成css，会影响，⽹站的性能

⼆、变量

3、变量作为url

4.变量延迟加载

三、嵌套规则

1.基本嵌套规则

2..&的使⽤

四、混合

1.普通混合（会编译到原⽣css中）

2.不带输出的混合

3.带参数的混合

4.带参数并且有默认值的混合

5.命名混合

6.匹配模式

7.arguments变量

五、运算

六、避免编译

七、继承
总结

前言

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

总结

以上就是我今天要分享的内容呀，有哪里不清楚的可以私信我或者留言评论区呀，我们一起学习，一起进步，最后祝屏幕前的你生活愉快呀~~~

移动端——less（学会less，这一篇就够了）相关推荐

学会JavaScript这一篇就够了~
文章目录 [One] JavaScript语言基础一.数据类型 1.数值型 2.字符串型 3.布尔型二.常量和变量 1.常量 2.变量--例子:输出球员的信息三.运算符 1.算术运算符--例子: ...
简单搞懂子网划分，学会子网划分这篇就够了（例题详解）
为什么要子网划分? 1.满足不同网络对IP地址的需求 2.实现网络的层次化 3.节省IP地址 4.默认子网掩码可以进一步划分,称为可变长子网掩码"VLSM" 有类IP地址规划的缺陷 ...
学习 HTML+CSS 这一篇就够了
文章目录学习 HTML+CSS 这一篇就够了 ! HTML 简介一.网页 1 .什么是网页 2. 什么是 HTML 3.网页的形成 4.网页总结二.浏览器 1. 常用浏览器 2.浏览器内核三. ...
[转载]潜移默化学会WPF（技巧篇）--具有Items元素的控件子项获取（一）
潜移默化学会WPF(技巧篇)--具有Items元素的控件子项获取(一) 1. treeview的Item获取 var g = this.tree.ItemContainerGenerator;Tree ...
swiper4.0（移动端）轮播图 - 案例篇
swiper4.0(移动端)轮播图 - 案例篇官方演示地址:异形的slide · 点击前往查看 banner 效果图: 代码: <!DOCTYPE html> <html lang ...
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局:自定义MUI底部tabs选项卡(nav组件 · 底部固定mui-bar-tab) · 案例演示效果图 html代码实例 · 如下: <!doctype html> <h ...
移动端1px像素实现技巧 - 讲解篇
移动端1px像素问题 - 解决办法: DPI介绍: 定义: DPI 表示(每英寸点数)图像每英寸长度内的点数. DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一 ...
PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
我学会了用计算机作文,我学会了作文(15篇)
我学会了作文(15篇) 在平时的学习.工作或生活中,许多人都有过写作文的经历,对作文都不陌生吧,写作文可以锻炼我们的独处习惯,让自己的心静下来,思考自己未来的方向.你知道作文怎样写才规范吗?下面是小编 ...

移动端——less（学会less，这一篇就够了）

文章目录

前言

一、预处理语言的诞生

二、使用步骤

1.、安装使⽤less vscode 插件 Easy LESS 插件

2.HBuilderX 安装插件

3.引⼊⽅法：运⾏时编译这种编译⽅式不好，编译⻚⾯时，将less转成css，会影响，⽹站的性能

⼆、变量

3、变量作为url

4.变量延迟加载

三、嵌套规则

1.基本嵌套规则

2..&的使⽤

四、混合

1.普通混合（会编译到原⽣css中）

2.不带输出的混合

3.带参数的混合

4.带参数并且有默认值的混合

5.命名混合

6.匹配模式

7.arguments变量

五、运算

六、避免编译

七、继承

总结

移动端——less（学会less，这一篇就够了）相关推荐

最新文章

热门文章

移动端——less（学会less，这一篇就够了）

文章目录

前言

一、预处理语言的诞生

二、使用步骤

1.、安装使⽤less vscode 插件 Easy LESS 插件

2.HBuilderX 安装插件

3.引⼊⽅法：运⾏时编译 这种编译⽅式不好，编译⻚⾯时，将less转成css，会影响，⽹站的性能

⼆、变量

3、变量作为url

4.变量延迟加载

三、嵌套规则

1.基本嵌套规则

2..&的使⽤

四、混合

1.普通混合 （会编译到原⽣css中）

2.不带输出的混合

3.带参数的混合

4.带参数并且有默认值的混合

5.命名混合

6.匹配模式

7.arguments变量

五、运算

六、避免编译

七、继承

总结

移动端——less（学会less，这一篇就够了）相关推荐

最新文章

热门文章

3.引⼊⽅法：运⾏时编译这种编译⽅式不好，编译⻚⾯时，将less转成css，会影响，⽹站的性能

1.普通混合（会编译到原⽣css中）