发表于: 2019-03-01 20:58:02
1 803
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
整理less一些比较常用的用法
嵌套:
.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;
}
例子比较简单可能看不出什么优越性,事实上大量重复的,或者是统一的样式使用变量就很方便,而且便于查找和修改,比如统一的背景色,或者统一的字体,字体大小;
注意点:变量有作用域,只能给自己和后代元素用,出了最外层的{},别的类没法调用。
混合:
.btn{
width:120px;
height:30px;
line-height:30px;
border-radius:15px;
color:#fff;
font-size:14px;
text-align:center;
background:#55E276;
cursor:pointer;
}
.submit,.buy,.star{
.btn;
}
一次书写,直接调用就好。
明天计划的事情:(一定要写非常细致的内容)
继续完成任务
遇到的问题:(遇到什么困难,怎么解决的)
暂无
收获:(通过今天的学习,学到了什么知识)
同今天完成的事情
评论