一、less简单写法
/**less的写法如下*/
.content{
ul{
list-style: none;
}
li{
height: 15px;
line-height: 25px;
padding-left: 15px;
background: url("./images/arr.jpg") no-repeat center left;
}
a{
text-decoration: none;
color: #535353;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
}
这是less最基本的写法。和css样式表有点类似,但是又有不同,less的这种写法减少了css代码的冗余。
二、带变量的less写法
less的变量使用@加名字定义,列入定义@name。
@green:green; //定义了绿色
@size: 3rem;
@white: white;
header,footer{
background: @green;
font-size: @size;
h1{
color:@white;
}
}
//将变量作为属性名的写法
@width: width;
.@{width}{
@{width}: 150px;
}
@imgUrl: "https://www.baidu.com/img";
header{
background:@green url('@{imgUrl}/bd_logo1.png');
height: 150px;
}
以上就是less的变量定义。使用变量的方式写less方便了后期样式的维护,只需修改变量值就可以改变整体样式。
三、less的函数定义
less还可以定义函数,使用函数更加方便了我们对样式的维护。
//无参数函数定义
.font-sty(){
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
h1{
font-size: 18px;
.font-sty //无参数函数引用
}
h2{
font-size: 16px;
.font-sty
}
//带选择器的混合使用
.myButton(){
&:hover{
border: 1px solid #56ffcf;
}
}
button{
.myButton;
}
//带参数的函数定义
.border(@color) {
border: 1px solid @color;
}
h2 {
&:hover{
.border(green);
}
}
h1 {
&:hover{
.border(red);
}
}
//带默认值的函数定义
.border_y(@color:#0fb9ff) {
border: 1px solid @color;
}
h1 {
&:hover{
.border_y();
}
}
以上编译后样式如下:
h1 {
font-size: 18px;
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
h2 {
font-size: 16px;
color: red;
font-family: Microsoft YaHei, "黑体", Arial, SimSun, Arial Unicode MS, MingLiU, Helvetica;
}
button:hover {
border: 1px solid #56ffcf;
}
h2:hover {
border: 1px solid #008000;
}
h1:hover {
border: 1px solid #ff0000;
}
h1:hover {
border: 1px solid #0fb9ff;
}
学习less可以参考less中文站。
配合html运行后的结果如下。