首页 技术 正文
技术 2022年11月17日
0 收藏 984 点赞 4,241 浏览 837 个字

我认识的less

优点:优雅,好用,简单,可复用性强,

缺点:less并其实不能为我们减少沉余css代码,还是要靠自己的CSS基础去判断哪些是沉余代码或者是可以合并的代码

之前发表的一篇文章一看就懂得移动端rem布局、rem如何换算

关于rem的运用与计算,文章中提到了使用计算器,感觉挺麻烦的,后来想想办法解决这个问题,

发现了less的预处理(推荐使用koala)

比如

width:100/24rem;

height:200/24rem;

如果你看过了我之前的文章

懂了rem布局原理,并且less能让我们用rem布局换算变得非常简单,也可以说非常直接

less还能设置传参数,下面举个例子

.test(@width){
width: @width;
}
.test_rem{
.test(640/24rem)
}

@width相当于一个参数,传入去css会被编译成

.test_rem {
width: 26.66666667rem;
}

less在处理不同浏览器之间差异的css3,只需写一次,然后通过传参的方式去调用,极大提高了我们的开发效率,下面举个例子

.border_r(@rad:4px){
border-radius: @rad;
-webkit-border-radius: @rad;
-moz-border-radius: @rad;
}

div{

width:100px;

height:100px;

.border_r();

}

在css被编译成

div{

width:100px;

height:100px;

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

}

如果想改变默认值只需调用时候改变参数传入的值

div{

width:100px;

height:100px;

.border_r(5px);

}

看到这里是否初步掌握了less的基本用法?上面是我总结最常用的几个小例子,最喜欢的是less的预处理,我写rem布局再也不用按计算器了~!!!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,556
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,405
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898