动态样式语言less初识

资料参考与http://lesscss.cn/

基本语法

定义变量

@sheetstyle：value；

@jdRed:#e4393c;

@thinBorder:3px;
@halfOpacity:0.2;
@baseFont:"SimeHei";
@baseSize:14px;
@normalBorderStyle:solid;
.box{
  background: rgba(22,40,60,@halfOpacity);
  border:@thinBorder @normalBorderStyle @jdRed;
}
//算术运算符
@md-width:970px;
@col-count:12;
.col-md-1{
  width: @md-width/@col-count;

}
.col-md-2{
  width: @md-width*2/@col-count;
  border:1px solid @jdRed;
}
//混入
.box5{
  padding: 30px;
  border: 4px solid #00AA88;
  margin-bottom: 20px;
}
.main{
//等同于把box5的样式复制一份给main
  .box5
}
.main{
  //可以在父选择器中写子选择器的样式，这种样式会被编译成 .main .point
  .point{background: red;}
}
//混入带参数
.well5(@pd,@bw,@mb:30px){//@md:30px 是es6的默认值
  padding:@pd;
  border: @bw solid #00CC00;
  margin-bottom: @mb;
}
.well{
  .well5(15px,2px);
  background: @jdRed;
  opacity: @halfOpacity;
}
//支持嵌套
.main{
  background: #E0E0E0;
  .affix{
    list-style: none;
    >li{
      display: inline-block;
      >a{
        text-decoration: none;
        &:hover{//&指向a
          color:palevioletred;
        }
      }
    }
  }
}
//函数
.col-md-6{
  width: floor(@md-width*6/@col-count);
}
.box9{
  color:@jdRed;
  background: lighten(@jdRed,20%);
  //高亮百分之几
}
.my-small{
  width: image-width("ad.png");
  height: image-height("ad.png");
  border:1px solid red;
}