Less学习笔记

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性。

 

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

 

编译方法：

 1、浏览器编译

      下载LESSCSS的.js文件，下载地址

  在页面引入：

<link rel="stylesheet/less" href="example.less" />
<script src="lesscss-1.4.0.min.js"></script>

（LESS文件要在LESS脚本之前引用）

  官网上说浏览器端是使用ajax拉取的.less文件，因此要将网站放在服务器端打开，而不能直接在本机打开。

 2、GUI编译工具

      我使用的是koala，一款国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html

      将less文件编译为对应的.css文件，并由页面引入。

 3、Node.js编译

 npm install -g less
 lessc xxx.less xxx.css

LESS 拥有四大特性：变量、混合、嵌套、函数。另外，LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。

变量：

 @padding-none: 0;
 .page {
　　 padding: @padding-none;
 }

编译后结果：

 .page {
   padding: 0;
 }

变量可以进行运算：

 @the-border: 1px;
 @base-color: #111;
 #header {
     background: (@base-color * 13);
     border-left: @the-border;
     border-right: (@the-border * 2);
 }

编译后：

 #header {
     background: #dddddd;
     border-left: 1px;
     border-right: 2px;
 }

变量也可以进行插值：

 @theURL: "./images";
 .test2 {
     background: url("@{theURL}/bg2.jpg");
 }

编译后：

.test2 {
 　　background: url("images/bg2.jpg");
}

 

 

变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。见下例：

 .page {
     width: @width-page ;
     @width-page: 400px;
     margin: 0 auto;
 }

编译结果：

 .page {
       width: 400px;
       margin: 0 auto;
 }

混合（Mixins）：

在Less中我们可以定义一些通用的属性，然后在其他属性中使用这些通用属性。

例如：

 .page {
      width: 400px ;
      margin: 0 auto;
      padding: 0;
      background: #dddddd;
 }
 #header {
      .page;
 }

编译后：

 #header {
     width: 400px;
     margin: 0 auto;
     padding: 0;
     background: #dddddd;
 }

 

 

带参数混合，在混合的使用中，我们可以像定义函数一样定义一个可以传入参数的通用属性：

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

编译后：

 .test {
     border-radius: 50px;
     -moz-border-radius: 50px;
     -webkit-border-radius: 50px;
 }

另外可以给出参数的默认值：

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

编译后：

 .test {
     border-radius: 25px;
     -moz-border-radius: 25px;
     -webkit-border-radius: 25px;
 }

 

 

如果不希望将通用的属性类暴露，在定义的通用属性的时候加上括号：

 .page () {
     width: 400px ;
     margin: 0 auto;
     padding: 0;
     background: #dddddd;
 }

 

 

如果参数很多，可以用arguments的方法一次调用：

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

编译结果：

 .test2 {
     box-shadow: 2px 5px 1px #888888;
     -moz-box-shadow: 2px 5px 1px #888888;
     -webkit-box-shadow: 2px 5px 1px #888888;
 }

 

 

如果不想限制参数的数量，可以在括号内填...，表示N个参数

 .margin (...) {
     margin: @arguments;
 }
 .test {
     .margin(10px 20px);
 }

编译结果：

 .test {
     margin: 10px 20px;
 }

 

 

LESS 提供了通过参数值控制 mixin 行为的功能：

 .radius (big, @radius) {
     border-radius: ( @radius + 10 );
     -moz-border-radius: ( @radius + 10 );
     -webkit-border-radius: ( @radius + 10 );
 }
 .radius (small, @radius) {
     border-radius: ( @radius - 10 );
     -moz-border-radius: ( @radius - 10 );
     -webkit-border-radius: ( @radius - 10 );
 }
 
 .test3 {
     @switch: small;
     .radius(@switch, 20px);
 }
 .test3 {
     @switch: big;
     .radius(@switch, 20px);
 } 

编译结果：

 .test3 {
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
 }
 .test4 {
     border-radius: 30px;
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;
 }

且参数是有域的：

 @switch: big;
 .test3 {
     @switch: small;
     .radius(@switch, 20px);
 }
 .test4 {
     .radius(@switch, 20px);
 }

编译结果依然是：

 .test3 {
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
 }
 .test4 {
     border-radius: 30px;
     -moz-border-radius: 30px;
     -webkit-border-radius: 30px;
 }

 

 

 

Guards：

Guards 被用来匹配表达式 (expressions)

 .test-guards (@height) when (@height >=100px){
     background: red;
 }
 .test-guards (@height) when (@height <100px){
     background: green;
 }
 .test-guards (@height) {
     height: @height;
 }
 
 .test5 {
     .test-guards(110px;);
 }
 .test6 {
     .test-guards(90px;);
 }

编译后：

 .test5 {
     background: red;
     height: 110px;
 }
 .test6 {
     background: green;
     height: 90px;
 } 

 

 

Guards 支持的运算符包括：> >= = =< <。

另外，true关键字是唯一被判断为真的值，也就是这两个混合是相等的：

 .truth (@a) when (@a) { ... }
 .truth (@a) when (@a = true) { ... }

而其他不为true的值都会判为假

如  .truth(1) .truth(40)  都不会匹配。

 

 

如果需要根据值的类型匹配混合，可以使用 is* 函数：

 .mixin (@a, @b: 0) when (isnumber(@b)) { ... }
 .mixin (@a, @b: black) when (iscolor(@b)) { ... }

几个检查基本类型的函数：

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

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

• ispixel
• ispercentage
• isem

最后，你可以使用关键词 and 在 guard 中加入额外的条件:

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

或者，使用关键词 not 否定条件：

 .mixin (@b) when not (@b > 0) { ... }

嵌套规则：

LESS 可以让我们以嵌套的方式编写层叠样式，如下例：

 #content {
     -webkit-box-shadow: 1px 1px  1px  #ccc;
     -moz-box-shadow: 1px 1px  1px  #ccc;
     box-shadow: 1px 1px  1px  #ccc;

    .test6{
         -webkit-box-shadow: 3px 4px 2px  #ccc;
         -moz-box-shadow: 3px 4px 2px  #ccc;
         box-shadow: 3px 4px 2px  #ccc;
     }
     &:hover{
         background: #ddd;
     };
 }    

编译结果：

 #content {
     -webkit-box-shadow: 1px 1px  1px  #ccc;
     -moz-box-shadow: 1px 1px  1px  #ccc;
     box-shadow: 1px 1px  1px  #ccc;
 }
 #content .test6 {
     -webkit-box-shadow: 3px 4px 2px  #ccc;
     -moz-box-shadow: 3px 4px 2px  #ccc;
     box-shadow: 3px 4px 2px  #ccc;
 }
 #content:hover {
     background: #ccc;
 }

函数：

 LESS提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。这些函数在函数手册中有详细介绍，手册地址

参考资料 LessCss中的语言特性