Less学习笔记

//变量
@color: #9b69ff;
h1{
  color: @color;
}
h2{
  color: @color;
}

//混合
.round(@radius:5px)
{
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}
.h1{
  .round;
  width: 100px;
  height:100px;
  border: 1px solid black;
}
.h2{
  .round(10px);
  width: 100px;
  height:100px;
  border: 1px solid black;
}

//嵌套
p{
  font-size: 30px;
  a{
    font-size: 40px;
    &:hover{
      border-width: 1px;
    }
  }
}

//函数
@the-border:1px;
@base-color:#111;
#footer{
  background-color: (@base-color + #003300);
  border-right:(@the-border * 2);
}

npm install -g less

lessc 名称.less 名称.css

<link rel="stylesheet/less" href="example.less" />