2.1 less使用总结

Less 是一门一种动态样式语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

1.0 客户端使用

下载地址

引入less样式

外联样式
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
内联样式如下：

接下来下载 less.js 并通过标签将其引入，放置于页面的元素内：

1.1 变量

Less中的变量允许你在样式中的某个地方对常用值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果;

@base:red;
body{color:@base}

1.2 混合

在LESS中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性

.bordered {
  border-top: solid 1px red;
  border-bottom: solid 2px green;
}
.div1 {
  color: #111;
  .bordered;
}
.div2 {
  color: red;
  .bordered;
}

1.3 带参数混合

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

.border-radius (@radius: 5px) {
     border:1px solid red;
     border-radius: @radius;
     width:300px;
}
.div1 {
    .border-radius(0px);
}
.div3 {
    .border-radius;
}
.div2 {
    .border-radius(20px);
}

1.4 arguments

@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量;

.pad(@top,@right,@bottom,@left) {
  padding:@arguments;
}
div{
  width:400px;
  border:1px solid red;
  .pad(10px,50px,100px,40px)
}
p
{
  background-color: green;
}

1.5 导引表达式

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用;

.mixin (@a) when (@a =red) {
  background-color: red;
}
.mixin (@a) when (@a =green) {
  background-color: green;
}
.mixin (@a) {
  color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }

1.6 嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式

#dvi1 {
  color: red;

  p {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {
      text-decoration: none
    }
  }
}

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus,&表示上一级元素;(&类似于js中的this)；

1.7 @import 导入选项

@import 可以至于任何你需要导入的地方
在标准的CSS，@import在规则必须先于所有其他类型的规则。但Less.js不关心;

example:

.test(){
    color:#ff6a00;
}
.study{
    .test;
}

@import "studyLess.css";

//output css
@import "studyLess.css";
.study {
  color: #ff6a00;
}

@import 可以根据文件扩展名不同而用不同的方式处理
如果文件是.css的扩展名，将处理为CSS和@import语句保持原样。
如果为其他的扩展名将处理为less导入。
如果没有扩展名，将会为他添加.less扩展名，作为less导入。
example:
@import "foo"; // foo.less 导入为less文件
@import "foo.less"; // foo.less 导入为less文件
@import "foo.php"; // foo.php 导入为less文件
@import "foo.css"; // 语句保持原样，导入为css文件

以下选项可用于覆盖此行为。
语法：@import (keyword) "filename";
reference: 使用该less文件但是不输出它
inline: 包括在源文件中输出，但是不作处理
less: 将该文件视为less文件，无论其扩展名为什么
css: 将文件视为css文件，无论扩展名为什么
once: 该文件仅可导入一次 (默认)
multiple: 该文件可以多次导入
optional: 当没有发现文件时仍然编译

多个关键字 @import 是允许的，你必须使用逗号分隔关键字：
example: @import (optional, reference) "foo.less";

1.8 LESS内置函数：

除了上面介绍的unit外

ceil(@number); // 向上取整

floor(@number); // 向下取整

percentage(@number); // 将浮点数转换为百分比，例如 0.5 -> 50%

round(number, [places: 0]); // 四舍五入取整

saturate(@color, 10%); // 饱和度增加 10%

desaturate(@color, 10%); // 饱和度降低 10%

lighten(@color, 10%); // 亮度增加 10%

darken(@color, 10%); // 亮度降低 10%

fadein(@color, 10%); // 透明度增加 10%

fadeout(@color, 10%); // 透明度降低 10%