less使用小总结

.less文件:

/*这句注释会被编译进css*/
//这句注释不会编译进css

/*引入其它的less文件*/
@import "v.less";

/*变量*/
@bgc: yellow;
#div1{
  width:100px;
  height:100px;
  background-color: @bgc;
}

/*常用的数值计算函数*/
@num1 : 100;
@num2 : 20.3px;
@num3 : 32.2px;
@num4 : 44.4px;
@num5 : 0.5;
@num6 : -55;
@color: #ff0000;
@bgColor : #00ff00;

#div1_5{
  color:@color;
  background-color: @bgColor;
}
#div2{
  width: unit(@num1, px); //unit()对数值连接单位/去除单位
  width: round(@num2);    //round()对数值四舍五入取整数
  width: ceil(@num3);     //ceil()对数值向下取整数
  width: floor(@num4);    //floor()对数值向上取整数
  width: percentage(@num5); //percentage()把小数转化为百分比
  width: unit(abs(@num3));  //abs()对数值取绝对值
  color: lighten(@color, 10%);              //lighten()颜色提亮
  background-color: darken(@bgColor, 20%);  //darken()颜色变暗
}

/*样式的嵌套写法*/
.ul1{
  list-style: none;
  li{line-height:30px;height:30px;}
  a{
    text-decoration: dashed;
  }
  a:hover{
    color:red;
    &:hover{  //&指父选择器
      background-color: yellow;
    }
  }
}

/*mixin*/
.defaultBorder(@width: 10px, @style: solid, @color: red){
  border: @width @style @color;
}
.defaultRadius(@radius){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
.box{
  width:200px;
  height:100px;
  .defaultBorder(20px);
  .defaultRadius(10px);
}

/*条件判断when*/
.area(@width) when(@width <= 200px){
  width:@width;
  background-color:yellow;
}
.area(@width) when(@width > 200px){
  width:@width;
  background-color: blue;
}
@media screen and (max-width: 200px){
  .when{
    .area(100px);
  }
}
@media screen and (min-width: 201px){
  .when{
    .area(210px);
  }
}

/*loop 估计用不到*/
.widthFun(100);

.widthFun(@n, @i:10) when (@i <= @n){
  width-@{i}{
    width: (@i * 100% / @n);
  }
  .widthFun(@n,(@i+10))
}
/*上面这段loop编程成css:*/
width-10 {
  width: 10%;
}
width-20 {
  width: 20%;
}
width-30 {
  width: 30%;
}
width-40 {
  width: 40%;
}
width-50 {
  width: 50%;
}
width-60 {
  width: 60%;
}
width-70 {
  width: 70%;
}
width-80 {
  width: 80%;
}
width-90 {
  width: 90%;
}
width-100 {
  width: 100%;
}

/*less的匹配模式(类似函数重载) 此处用方向不同的样式三角形举例*/
.sanjiao(down ,@w: 100px, @c:#ff6600){
  border-width: @w;
  border-color: @c transparent transparent transparent;
  border-style: solid;
}
.sanjiao(top ,@w: 100px, @c:#ff6600){
  border-width: @w;
  border-color: transparent transparent @c transparent;
  border-style: solid;
}
.sanjiao(left ,@w: 100px, @c:#ff6600){
  border-width: @w;
  border-color: transparent  @c  transparent transparent;
  border-style: solid;
}
.sanjiao(right ,@w: 100px, @c:#ff6600){
  border-width: @w;
  border-color: transparent transparent transparent @c ;
  border-style: solid;
}
#tranigle{
  width: 0;
  height: 0;
  overflow: hidden;
  .sanjiao(right)
}

/*less中的论据---直接使用函数默认数值*/
.border111(@s: solid, @c :#ff6600, @h:10px){
  border: @arguments;
}

/*less中免编译*/
.w1{
  width: calc(300px * 0.3);     //css3中的计算属性 calc
  width: ~'calc(300px * 0.3)';  //~'XXX'指示less不要编译XXX而是直接把XXX写入css文件中
}

/*less中的important*/
.sss{
  width: 100px;
  height: 100px;
  border: 10px;
}
.box222{
  .sss !important; //编译成css后，每个.sss中的属性后面都加上了 !important
}

/*less中的函数们 参考官网：http://less.bootcss.com/functions/ */
.temp{
  width: convert(9px, "mm");  //convert()进行长度单位转换 适合游戏场景svg
}

编译成的.css文件：

/*这句注释会被编译进css*/
/*引入其它的less文件*/
/*变量*/
#div1 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
/*常用的数值计算函数*/
#div1_5 {
  color: #ff0000;
  background-color: #00ff00;
}
#div2 {
  width: 100px;
  width: 20px;
  width: 33px;
  width: 44px;
  width: 50%;
  width: 32.2;
  color: #ff3333;
  background-color: #009900;
}
/*样式的嵌套写法*/
.ul1 {
  list-style: none;
}
.ul1 li {
  line-height: 30px;
  height: 30px;
}
.ul1 a {
  text-decoration: dashed;
}
.ul1 a:hover {
  color: red;
}
.ul1 a:hover:hover {
  background-color: yellow;
}
/*mixin*/
.box {
  width: 200px;
  height: 100px;
  border: 20px solid red;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
/*条件判断when*/
@media screen and (max-width: 200px) {
  .when {
    width: 100px;
    background-color: yellow;
  }
}
@media screen and (min-width: 201px) {
  .when {
    width: 210px;
    background-color: blue;
  }
}
/*loop 估计用不到*/
width-10 {
  width: 10%;
}
width-20 {
  width: 20%;
}
width-30 {
  width: 30%;
}
width-40 {
  width: 40%;
}
width-50 {
  width: 50%;
}
width-60 {
  width: 60%;
}
width-70 {
  width: 70%;
}
width-80 {
  width: 80%;
}
width-90 {
  width: 90%;
}
width-100 {
  width: 100%;
}
/*上面这段loop编程成css:*/
width-10 {
  width: 10%;
}
width-20 {
  width: 20%;
}
width-30 {
  width: 30%;
}
width-40 {
  width: 40%;
}
width-50 {
  width: 50%;
}
width-60 {
  width: 60%;
}
width-70 {
  width: 70%;
}
width-80 {
  width: 80%;
}
width-90 {
  width: 90%;
}
width-100 {
  width: 100%;
}
/*less的匹配模式(类似函数重载) 此处用方向不同的样式三角形举例*/
#tranigle {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 100px;
  border-color: transparent transparent transparent #ff6600;
  border-style: solid;
}
/*less中的论据---直接使用函数默认数值*/
/*less中免编译*/
.w1 {
  width: calc(90px);
  width: calc(300px * 0.3);
}
/*less中的important*/
.sss {
  width: 100px;
  height: 100px;
  border: 10px;
}
.box222 {
  width: 100px !important;
  height: 100px !important;
  border: 10px !important;
}
/*less中的函数们 参考官网：http://less.bootcss.com/functions/ */
.temp {
  width: 2.38125mm;
}