Less 语法学习

Less 语法学习

(1)Less 支持CSS 所有的语法
(2)Less 支持多行/单行注释，但CSS 只支持多行注释，所以Less 中的单行注释不会被编译到CSS 文件
(3)Less 有变量(Variable)的概念
声明变量： @变量名: 值;
使用变量： 选择器{ 样式: @变量名; }
变量值可以是任意合法的样式值。
(4)Less 可以执行样式/变量的计算
加、减、乘、除、取余
(5)Less 支持样式的混入(Mixin)
选择器1 { 样式; }
选择器2 {
选择器1;
样式;
}
(6)Less 在样式混入时可以指定参数
选择器1(@变量, @变量...) { 样式; }
选择器2 {
选择器1(值, 值...);
样式;
}
(7)Less 支持样式嵌套
选择器1 {
样式1;
选择器2 {
样式2;
}
}
会被编译为：
选择器1 { 样式1; }
选择器1 选择器2 { 样式2; }
(8)Less 为样式提供了几十个可用的函数
ceil( )
floor( )
percentage( 5/10 ) // 50%
round( )
lighten(@c, 20%) 颜色变淡指定的百分比
darken(@c, 30%) 颜色变暗指定的百分比
....
(9)Less 支持文件包含指令
CSS 提供了@import 指令，可用于包含其它的CSS 文件，但由于会增加请求次数，不推荐使用；
Less 也提供了@import 指令，可用于包含其它的Less 文件，推荐使用！—— Less 的文件包含是在服务器端执行的文
件拼合，客户端的一次请求就可以获得所有样式！
@import "xx.less";

* {
  box-sizing: border-box;
  padding: 0;
}

/*多行注释*/
//单行注释
/*多行注释*/
//单行注释


/*变量*/
@jd-red: #f4393c;
@std-width: 4px;
@half-opacity: .4;
@first-font: 'SimHei';
@normal-border: solid;

.box {
  color: @jd-red;
  font-family: @first-font;
  border: @std-width @normal-border @jd-red;
}

/*变量的运算*/
@container-width: 992px;
@col-count: 12;

.col-1 {
  width: @container-width/@col-count;
}
.col-3 {
  width: 3*@container-width/@col-count;
}

/*样式的混入(Mixin)*/
.box2 {
  padding: 20px;
  border: 3px solid #aaa;
}
.well {
  .box2;
  background: #eee;
}
.alert {
  .box2;
  color: #f00;
}


/*带参数的混入*/
.box3(@pd, @bdw, @bdc:#000) {
  padding: @pd;
  border: @bdw solid @bdc;
}
.well {
  .box3(10px, 2px, #aaa);
  background: #eee;
}
.alert {
  .box3(20px, 1px);
  color: #f00;
}

/*样式嵌套*/
/*

.main {
  padding: 10px;
}
.main ul {
  list-style: none;
}
.main ul li {
  display: inline-block;
}
.main ul li > a {
  color:#333;
}
.main ul li > a:hover {
  text-decoration: none;
}
*/
.main {
  padding:10px;
  ul {
    list-style:none;
    li {
      display: inline-block;
      > a {
        color: #333;
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

/*Less提供的函数*/
.col-1 {
  width: floor(992px/12);
}
.col-2 {
  width: percentage(992px/12/992px);
}