less基础使用方法之变量、混合、嵌套
HTML
2019-01-04 11:47:54
一、Less基础使用!
因只是做关于less的基础归纳,采用的是 koala编译软件进行的编译处理;另也可以用浏览器或者node进行编译处理!
koala编译软件处理方法:
1、下载 koala 软件(http://koala-app.com/index-zh.html)
2、将需要编译的less文件夹载入 koala 软件中
3、引入经过 koala 软件编译之后的css文件
注:关于 koala的详细使用方法可参考本博客《koala软件使用方法》
二、Less中的变量!
@变量名:定义的值
//编译前
@widt_100:100px;
@widthADD:@widt_100+100px;
.box1{
width:@widt_100
}
.box{
width:@widthADD
}
//编译后
.box1 {
width: 100px;
}
.box {
width: 200px;
}
注:上方代码片段中定义里两个变量分别是@widt_100和@widthADD;
@widt_100定义的值为100px
@widthADD定义的值为@widt_100的值+100px;即为100px+100px
三、Less中的混合
开发中我们常遇到相同的代码在不同的地方多次运用,或者某些定义的class在之后的样式中被多次运用。
简单的来说,我们在一个class中调用之前已经定义过的一个class中的样式!
编译前
//混合
//基础使用
.border{
border: #f00 solid 5px;
}
.box{
.border
}
//带参数
.border1(@width){
border:#f00 solid @width
}
.box1{
.border1(10px)
}
//参数带初始值
.border2(@width:20px){
border:#f00 solid @width
}
.box2{
.border2()
}
.box2{
.border2(10px)
}
编译后
.border {
border: #f00 solid 5px;
}
.box {
border: #f00 solid 5px;
}
.box1 {
border: #ff0000 solid 10px;
}
.box2 {
border: #ff0000 solid 20px;
}
.box2 {
border: #ff0000 solid 10px;
}
四、嵌套
嵌套是使用最为频繁的,在样式定义中,我们经常会这么写#div p span;释义为找到id为div下的p标签下得span标签
在正常编写中需要我们将每一层次都写的很清楚,这也就决定了代码量的加大!
less中的嵌套便能很大程度的节约代码量和逻辑关系!
编译前
//嵌套
#div{
height: 100px;
p{//#div中P标签样式设定
color: green;
span{//#div p span中背景设置
background: aquamarine;
}
}
}
编译后
#div {
height: 100px;
}
#div p {
color: green;
}
#div p span {
background: aquamarine;
}
less的出现极大程度上简化了我们的工作量,也更加方便我们对样式进行管理。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
2821人已阅读