less学习笔记之less初步

一、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运行后的结果如下。