Less教程

Less使用

• 变量
  声明变量
  使用变量
  全局变量和局部变量

@color: #f00;
@width: 200px;
@height: 200px;
.borderColor {
  @radius: 50%;
  width: @width;
  height: @height;
  border: 1px solid @color;
}

• 混合
  混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

@color: #f00;
@width: 200px;
@height: 200px;
@radius: 50%;
.borderColor {
  width: @width;
  height: @height;
  border: 1px solid @color;
  .borderRadius;
}
.sq {
  width: @width;
  height: @height;
  border: 1px solid @color;
  .borderRadius(50px);
  background-color: rgba(80, 0, 120, 0.5);
}
.borderRadius(@r:10px) {
  border-radius: @r;
}

• 嵌套规则
  我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

  .menu {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    border: 1px solid red;
    ul {
      li {
        color: red;
        border: 1px solid black;
        &:hover {
          background: pink;
        }
      }
    }
  }
}

• 运算
  任何数字、颜色或者变量都可以参与运算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

@var: 1px + 5;//6px.
//括号也同样允许使用:
width: (@var + 5) * 2;
//在复合属性中进行运算:
border: (@width * 2) solid black;

• Color 函数
  lighten 高亮
  darken 降低亮度
  saturate 升调整颜色的饱和度
  desaturate 降低颜色的饱和
  fade 设置颜色的透明度
  fadein 增加不透明度
  fadeout 增加透明度的
  spin 旋转当前的颜色

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

• Math 函数

round(1.67); // returns `2`  四舍五入
ceil(2.4);   // returns `3`  向上取整
floor(2.6);  // returns `2`   向下取整

• 命名空间
  为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

@imgurl:"../img/baidu.png";
#handle {
  .borderColor(@c:#ff0) {
    border: 1px solid @c;
  }
  .bgimage(@c:""){
    background-image: url("@{c}");
  }
}

.sp {
  width: 100px;
  height: 100px;
  #handle> .borderColor(#00f000);
  #handle>.bgimage(@imgurl);
}

• 字符串插值
  变量可以用类似ruby和php的方式嵌入到字符串中

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

• 混合—类似switch 遍历

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}
@switch: dark;

.menu {
  width: 200px;
  height: 200px;
  .mixin(@switch, #888);
}