less

安装

在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：$ npm install -g less

 

命令行用法

安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：

$ lessc styles.less > styles.css

若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用 Clean CSS 进行压缩。（在此之前要通过npm安装less-plugin-clean-css插件）

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

 

使用

  一 变量（变量是按需加载的，不必强制在使用之前声明。sass必须先声明，不然报错）

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

还可以在定义变量时使用其他的变量

 

字符串插值：

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

    二 混合（Mixins）   直接定义类名   使用的时候也不需要@extend

         1. 如果想隐藏属性集合，不让它暴露在css中，但是又想在其他的属性集合中引用，就可以定义不带参数的属性集合

             2.多参数混合：可用逗号和分号，推荐使用分号（因为逗号还可表示一个参数中一组值的分隔符。）

             3.使用同样的名字和同样同样数量的参数定义多个混合是合法的，在被调用时，less会应用到所有可用应用的混合上，比如你调用混合时只传了一个参数，那么所有只强制要求一个参数的混合都会被调用。 （只有一个参数没有默认值）

              4. @arguments变量 包含了所有传递进来的参数。  

                       

.box-shadow (@x:0, @y:0, @blur:1px, @color:#000){
     box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
}
.box {
    .box-shadow(2px, 5px);
}
.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
    .rounded-corners;
}

　　

               5. !important 关键字    如果在混合后面加上!important关键字表示将混合带来的所有属性标记为!important

            6. 几个检查类型的函数

                        - iscolor

- isnumber

- isstring

- iskeyword

- isurl

               如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：

- ispixel

- ispercentage

- isem

            7. Guards  用来匹配表达式

.mixin (@a) when (lightness(@a) >= 50%) { 
}
.mixin (@a) when (lightness(@a) < 50%) {
}

　　

要点在于关键词 when，它引入了一个 guard 条件 （这里只用到一个 guard），你可以使用关键词 and 在 guard 中加入额外的条件:.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

           三 嵌套

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

                         

               嵌套Media Queries

 

 .one {
  @media ( 400px) {
  font-size: 1.2em;
  @media print and color {
  color: blue;
  }
  }
}

　　

               

        四 运算

 

         五 函数http://www.1024i.com/demo/less/reference.html

 

           六   命名空间

 

       七   导入   可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可。对导入CSS文件只做一处处理：将导入的语句提到最前，紧跟在@charset之后。

          @import "library.less" screen and (max- 400px); // 通过media query指定的import@import "library.less"; // 无media query的import