Less:优雅的写CSS代码

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
demo.less

 @base: #f938ab;/*定义变量*/
.box {
  color: @base;
  border-color: lighten(@base, 30%); /*使用函数*/
  /*嵌套*/
  &-content{
    width:100%;
  }
  .title{
      color:#ccc;
  }
}

变量

使用@符号定义。例如：

@base: #f938ab;.box {    color: @base; /*变量引用*/

变量也支持URLs：

// Variables
@images: "../img"; 
// 用法
body {  color: #444;  
background: url("@{images}/white-sand.png");

属性也支持变量的形式：

@property: color;

.widget {
  @ {
    property
  }: #0ee;
  background-@{property}: # 999;
}

混合（Mixin）

混合就是前面定义的一个样式，后文可以直接引用。示例：

@base: #f938ab;
.ellipsis_txt {
  display: -webkit - box; -
  webkit - line - clamp: 2;
  overflow: hidden;
  word - break: break -all;
  text - overflow: ellipsis; -
  webkit - box - orient: vertical;
}

.box {
  color: @base;
  .ellipsis_txt;
  /*或者
  .ellipsis_txt();
  */
}

嵌套

可以在一个css里有多个css块，以方便我们更好的组织代码，编写css模板。

#header {
  color: black;
  .navigation {
    font - size: 12 px;
  }
  .logo {
    width: 300 px;
  }

还支持&符号：

#header {
  color: black; &
  -navigation {
    font - size: 12 px;
  } &
  -logo {
    width: 300 px;
  } &
  : hover {
    color: #ccc;
  }
}

生成：

#header {
  color: black;
}#
header - navigation {
  font - size: 12 px;
}#
header - logo {
  width: 300 px;
}#
header: hover {
  color: #ccc;
}

运算

任何数字、颜色或者变量都可以参与运算。下面是一组案例：

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

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

示例：

@var: 1 px + 5;
div {
  width: @var;
}

输出：

div {
  width: 6 px;
}

函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5 % );
  background - color: spin(lighten(@base, 25 % ), 8);
}


编译生成：

  .class {
    width: 50 % ;
    color: #f6430f;
    background - color: #f8b38d;
  }

带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

然后在其他class中像这样调用它:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

所以现在如果我们像这样调用它的话:

#header {
  .border-radius;  
}

@arguments 变量

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box - shadow(@x: 0, @y: 0, @blur: 1 px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

将会输出:

 box-shadow: 2px 5px 1px #000;
  -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;

命名空间

有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。
示例：

/*模块*/ #
bundle {
  .button {
    display: block;
    border: 1 px solid black;
    background - color: grey; &
    : hover {
      background - color: white
    }
  }
  .tab {
    /**/ }
  .citation {
    /**/ }
}

/*下面复用上面的一部分代码*/
#header a {
  color: orange;#bundle > .button;
}

编译生成：

# bundle.button {
  display: block;
  border: 1 px solid black;
  background - color: grey;
}
#bundle.button: hover {
  background - color: white;
}
#bundle.tab {
  /**/
}
#bundle.citation {
  /**/
}

/*下面复用上面的一部分代码*/
# header a {
  color: orange;
  display: block;
  border: 1 px solid black;
  background - color: grey;
}
#header a: hover {
    background - color: white;
}

LESS中的命名空间，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。

作用域

子类里面的优先，找不到才往父类里找。

示例：

@var: red;

#page {
  @var: white;#header {
    color: @var; // 这里值是white
  }
}


也不会因为变量后面定义而影响作用域：

@var: red;
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}
和上面的例子是一样的。

注释

css仅支持块注释。less里块注释和行注释都可以使用：

/* 一个注释块
style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

导入

和css一样，你可以导入一个.less文件，此文件中的所有变量就可以全部使用了。如果导入的文件是.less扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

函数参考

color(string) 解析颜色, 将代表颜色的字符串转换为颜色值
convert(value, unit) 将数字从一种单位转换到另一种单位.第一个参数为带单位的数值, 第二个参数为单位.
ceil(number) 向上取整
floor(number) 向下取整
percentage(number) 将浮点数转换为百分比字符串
round(number) 四舍五入取整
sqrt(number) 计算一个数的平方根, 并原样保持单位
pow(number, number) 设第一个参数为A, 第二个参数为B, 返回A的B次方.
mod(number, number) 返回第一个参数对第二参数取余的结果.
min(value1, ..., valueN) 返回一系列值中最小的那个.
max(value1, ..., valueN) 返回一系列值中最大的那个.
abs(number) 计算数字的绝对值, 并原样保持单位
sin(number) 正弦函数
cos(number) 余弦函数
asin(number) 反正弦函数.返回以弧度为单位的角度, 区间在 - PI / 2 到 PI / 2 之间.
acos(number) 反余弦函数.区间在 0 到 PI之间.
tan(number) 正切函数
atan(number) 反正切函数
pi() 返回圆周率 π(pi)
isnumber(value) 如果待验证的值为数字则返回 true, 否则返回 false
isstring(value) 如果待验证的值是字符串则返回 true, 否则返回 false
iscolor(value) 如果待验证的值为颜色则返回 true, 否则返回 false