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 (width: 400px) {
  font-size: 1.2em;
  @media print and color {
  color: blue;
  }
  }
}

  

               
        四 运算
 
 
           六   命名空间
 
       七   导入   可以导入CSS文件,也可以导入LESS文件。但只有导入的LESS文件才会被处理(编译),导入的CSS文件会保持原样。如果你希望导入一个CSS文件,保留.css后缀即可。对导入CSS文件只做一处处理:将导入的语句提到最前,紧跟在@charset之后。
          @import "library.less" screen and (max-width: 400px); // 通过media query指定的import@import "library.less"; // 无media query的import
          
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
          
 
posted @ 2016-08-05 15:48  lhy031  阅读(250)  评论(0编辑  收藏  举报