less的一些用法整理
前提理解:第一个,less是单独的一种文件,可以理解为css的升级版,完全按照css写也没问题,不过它提供了很多便利的东西,可以省好多代码量。第二个,html只认css,所以需要配套一些软件将less解析成css,引用时候,直接引用css就好。gulp,koala 都是常用的,Koala好像简单且方便一点。
嵌套
less的优势有很多,最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写css时如果元素过多,每个都像
.test .contnet ul li{ }
这样写的话,大概会疯,结构不清晰,查找起来也不知道哪块归哪块,反正长长的都是css。在less中,则可以这样写
.test{
.content{
ul{
li{}
}
}
}
看起来好像很烦,其实不是,因为css要写起来,需要四个块,每个块都得把父元素写清楚,不然有可能重名出错(尤其项目大起来的时候,几十个页面,class重名太常见了),而less只需要一个块, .test连同其后代元素全部在它的包裹内设定好,每个元素名称只需要写一次就够了。
&
这个符号在less中可以代替父级元素,举个栗子
a{
color:blue;
&:hover{
color:red;
}
}
再比如,父元素叫.wrap 儿子元素中有一个叫 .wrap_2,那就可以这样写
.wrap{
&_2{}
}
优点:块和块界限可以更清楚,很多东西不需要并列写;时不时还可以偷个懒,比如爸爸类的名字改来改去的时候,写&也省心好多。
变量
重要说明:变量需要@开头,比如@width,@height,名字可以随便取
定义的话在相应位置直接写就好,类似于这种(写.box外面也可以)
.box{
@width:200px;
@height:500px;
@my_color:#ccc;
width:@width;
height:@height;
background:@my_color;
}
例子比较简单可能看不出什么优越性,事实上大量重复的,或者是统一的样式使用变量就很方便,而且便于查找和修改,比如统一的背景色,或者统一的字体,字体大小;
注意点:变量有作用域,只能给自己和后代元素用,出了最外层的{},别的类没法调用。
运算
有变量当然可以计算,比如
@width:500px;
.box{
width:@width-50;
}
意思就是450px,这里的计算加减乘除皆可,单位可加可不加。
混合
有点类似于函数的调用,这里的话就要说点别的东西了,工作前,我对于css的理解大概就是给html对应的元素设定样式,工作后我才发现,不对,css应该是罗列各种各样的样式,html里只是选择了其中的一款。为什么会产生这种感觉,因为样式会重复,组件会重复,这个页面有个tab切换,别的页面也有tab切换;这个位置有个按钮,其他好几个位置也有一个按钮。如果每个页面都私人定制,那就意味着我们需要不断的写重复的东西,在css中我们没有办法,最多花点时间拷贝过来,但是less中可以方便很多。
/*这里是按钮的统一设置,最好写最外层,方便调用*/
.btn{
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:#55E276;
cursor:pointer;
}
//下方为各种位置的按钮,less中允许双斜线的注释
.submit,.buy,.star{
.btn;
}
一次书写,直接调用就好。
但按钮和按钮毕竟是不一样的,所以需要有所区别,区别可能是颜色,也可能是大小长度,解决方法有两个,planA:公用部分直接调用,区别的部分自己写。planB:传入参数。
planA
/*这里是按钮的统一设置,最好写最外层,方便调用*/
.btn{
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:#55E276;
cursor:pointer;
}
//下方为各种位置的按钮,less中允许双斜线的注释
.submit{
.btn;
box-shadow:0 1px 5px #ccc;
}
.star{
.btn;
&:hover{
background:#E65151;
}
}
.buy{
.btn;
border:1px solid #ccc;
}
planB
/*传参类似于函数,所以这里的变量作用域仅在{}之内,取什么名字都随意*/
.btn(@color){ //这里加个了括号放参数
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:@color; //用参数表示
cursor:pointer;
}
//下方为各种位置的按钮,背景颜色作为参数传入
.submit{
.btn(red);
box-shadow:0 1px 5px #ccc;
}
.star{
.btn(#55E276);
&:hover{
background:#E65151;
}
}
其实最后我把两个方案相当于合并了一下,共用但是有区别的用传参解决,独有的,直接写就可以了。
传参也可以放入默认值,具体这样写
.btn(@width:500px){width:@width;}
调用时候是这样的
.submit{
.btn(); //这里一定要加括号,需要改默认值,直接写括号里,否则宽度就是500px
}
匹配模式
还是上面的例子,如果我一定要用一个.btn(xxxxx)解决,涵盖所有按钮样式,可不可以,答案是可以。匹配模式就是这种可以随便定制的东西,其实理解起来也很简单,括号里多一个命名而已,比如调用这个.btn(no_border,#55E276); 表示无边框样式,背景色为#55E276(注意,命名是没有@符号的),如果调用.btn(border,#E65151); 表示有边框样式,背景色为#E65151,具体写法如下
.btn(@_,@color){ //不同命名的公共部分要这样写,必须是@_,表示公共部分
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:@color; //用参数表示
cursor:pointer;
}
.btn(no_border,@color){
//可以直接这样放着,或者写个border:none 这里的列子举得不好,如果换成左浮动右浮动,或者绝对定位的上下左右,应该更好点
}
.btn(border,@color){
border:1px solid #ccc;
}
.btn(border); //表示默认背景色有边框,边框颜色也可以写个参数进去
.btn(border,#E65151)//表示背景色#E65151,有边框
小结
常用的大概就上面那些,避免编译的 ~"..." 或者 用于调试时候的!impotant 这些我都没怎么用过。less相关的函数还有一些,一些高级功能可以去官网上查找,但就我目前而言,工作中使用上面的肯定足够足够了,它已经节省了我大量的时间,免去了很多重复劳动。
转载于:https://www.cnblogs.com/grey-zhou/p/5796496.html
less的一些用法整理相关推荐
- Google Guava 库用法整理
http://macrochen.iteye.com/blog/737058 参考: http://codemunchies.com/2009/10/beautiful-code-with-googl ...
- python数据可视化工具 pandas_Pandas数据可视化工具——Seaborn用法整理(下)
在前一篇文章 Pandas数据可视化工具--Seaborn用法整理(上),我们了解了如何使用这些Seaborn代码绘制分布图和分类图.在本文中,我们将继续讨论Seaborn提供的一些其他以绘制不同类型 ...
- 《编码规范和测试方法——C/C++版》作业 ·002——函数返回地址、static关键词用法整理
文章目录 一.函数返回地址的情形 1.函数返回值为指针 二.static关键字用法整理 1.static全局变量 2.static局部变量 3.static函数 4.类的static成员数据 5.类的 ...
- Linux中find用法整理
一.Linux中find常见用法示例 ·find path -option [ -print ] [ -exec -ok command ] {} /; ...
- pandas 作图 统计_Pandas数据可视化工具——Seaborn用法整理(下)
本科数学,编程几乎零基础(之前只学过matlab)今年年初开始学习Python数据挖掘,找到了一个很好的平台--BigQuant,省去了安装Python和安装各种库的烦恼.我最近在开始了解机器学习,B ...
- bitset 用法整理
在项目中需要使用到10进制48位的数字按二进制由高到低解释,然后按每一位是0还是1来判断报警或错误状态. 所以,在Linux中的C++下需要用到二进制转换以及按位解析.收集到了一些资料,自己保存一下啊 ...
- rand函数用法整理
rand函数用法整理 一.普通用法 1.1 生成随机数 rand()函数不需要参数,它将会返回0到RAND_MAX之间的任意的整数.如果我们想要生成一个在区间[0, 1]之内的数,那么我们可以写出如下 ...
- python Faker 包常用法整理
关于python Faker包用法整理 基本用法 from faker import Faker # 导入第三方包 fake = Faker("zh_CN") # 实例化方法,这是 ...
- Displaytag用法整理
Displaytag用法整理一 1. Displaytag提供的默认的系统提示均为英文,有两种方法进行汉化: 1).将displaytag-1.1.1.jar中自带的org/display/prope ...
- maya 常用命令用法整理
MAYA常用命令用法整理 孤立模式 Shift + i -- 单独显示物体 Ctrl + h -- 隐藏该物体 Ctrl + Shift + h -- 显示上一个被隐藏的物体 /在Outliner / ...
最新文章
- Solaris 10 系统维护
- 在Visual Studio中使用命令行参数进行调试
- 国内大公司的开源项目( 阿里 腾讯 百度 新浪 搜狐 豆瓣 大众点评)
- 从ucOS谈,为什么需要操作系统?
- 内存恶鬼drawRect
- P3914-染色计数【树形dp】
- in module from . import multiarray ImportError: DLL load failed: 找不到指定的模块解决
- 名创优品向港交所提交上市申请书
- Bootstrap-CL:按钮下拉菜单
- 如何开发一款可以删除个人信息的社交软件?小扎做到了!
- python中装饰器的作用_Python中装饰器的用法
- Echart用法介绍
- 探索Holo_java操作日期
- python绘制capm模型
- openssl给内网IP生成ca证书(ssl证书)
- 苦于抖音四季文案久已的朋友们快看过来!
- python飞机大战实验报告心得_Python学习之路「第七篇」-Pygame之飞机大战1
- 振弦采集模块配置工具VMTool生成寄存器值
- Java Agent:通灵之术
- 利用BARK和Telebot进行VPS实时预警推送