less之简单介绍

less简单记录

http://www.lesscss.net/article/home.html

 1、Less前言
      关注less很久了，整理和查看了很多相关的资料，此篇作为less相关的开篇，简单记录一下。
 
 
2、Less是什么？
 
      --------- 动态样式语言
 
 其实就是将css变得可以使用动态语言的特性，如变量、继承、运算、函数。可以向编程一样去写css，是不是很酷？
 less可以应用在客户端也可以应用在服务端（借助一些如Node.js这样的工具）
 
3、Less快速适用
 
如果你本地或者像看源码的话，需要下载一个依赖脚本文件：less.js
下载地址：http://code.google.com/p/lesscss/downloads/list
 
如果你直接连在线的地址可以在html页面的head标签里面增加如下代码：

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>  

当然我们还需要引入一个我们写less的文件，以.less为文件的后缀 
我们就在上面步骤中的<script>标签的上面增加如下的代码
 
Html代码  
     
<!-- 方式和css的导入是一样的 -->  
<link rel="stylesheet/less" href="style.less" type="text/css" />  
 
注意一下rel的值：stylesheet/less
 
这边我来贴一些源码，看看为什么必须要按照这样的规则来：
 
Js代码  
var links = document.getElementsByTagName('link');  
var typePattern = /^text/(x-)?less$/;  
  
less.sheets = [];  
  
for(var i=0;i<links.length;i++){  
    if(links[i].rel === 'stylesheet/less' || (links[i].rel.match(/stylesheet/)  
         && (links[i].type.match(typePattern)))  ){  
          less.sheets.push(links[i]);  
    }  
}  
 
 
变量：
 允许我们定义一些比较通用的样式规则

Css代码  
/*less code*/  
@width:960px;  
.header{  
    width:@width;  
}  
.footer{  
    width:@width;  
}  
  
  
/*css code*/  
.header{  
    width:960px;  
}  
.footer{  
    width:960px;  
}  
 
    其实我们可以发现：less中的变量只能被定义一次，前面定义的会被后面覆盖。


css代码  
/*我同时定义@h*/  
@h:30px;  
@h:100px;  
.header{  
    height:@h;  
}  
  
  
/*输出的css*/  
.header{  
   height:100px;  
}  
 
    同时在less中，也有类似于php语言中变量的变量的概念。
 
    
Css代码  
//当然变量能够参与计算  
@base-h:50px;  
@height1:@base-h+100px;  
@height2:@base-h+200px;  
  
.header{  
    height:@height2;  
}  
  
/*转换的css*/  
.header{  
    height:250px;  
}  
  
  
  
//或者可以这样写---但是好像不能做计算  
@base-h:50px;  
@height1:"base-h";  
.header{  
    height:@@height1;  //注意是两个@@  
}  
     
混入(Mixin)
     ------ 参数可以定义默认值，也可以不定义


Css代码  
/*可以带参数*/  
.radius(@radius:3px){  
     border-radius:@radius;  
     -webkit-border-radius:@radius;  
     -moz-border-radius:@radius;  
}  
  
.header{  
    .radius;  
}  
.footer{  
    .radius(5px);  
}  
  
  
/*转成的css*/  
.header{  
     border-radius:3px  
     -webkit-border-radius:3px;  
     -moz-border-radius:3px;  
}  
.footer{  
     border-radius:5px  
     -webkit-border-radius:5px;  
     -moz-border-radius:5px;  
}  
 
     这里面还有一个（类似于数组的）@arguments 变量


Css代码  
     
.box-shadow(@x:2px,@y:2px,@blur:1px,@color:#000){  
    box-shadow:@arguments;  
    -moz-box-shadow:@arguments;  
    -webkit-box-shadow:@arguments;  
}    
  
.header{  
    .box-shadow(4px;3px;1px;#fefefe);  
}  
  
  
/*转换后的*/  
.header{  
    box-shadow:4px;3px;1px;#fefefe;  
    -moz-box-shadow:4px;3px;1px;#fefefe;  
    -webkit-box-shadow:4px;3px;1px;#fefefe;  
}