关于less的一些研究

1、Less前言

 

      关注less很久了，整理和查看了很多相关的资料，此篇作为less相关的开篇，希望在后期的一些项目里面开始实施起来，但是很多人觉得维护成本比较高，如果对应人员没有相关的知识积累，所有决定写一篇，以后也算less应用项目的一个捆绑资料交接一下。

 

 

2、Less是what?

 

      --------- 动态样式语言

 

•  其实就是将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>标签的上面增加如下的代码

 

 

   
<!-- 方式和css的导入是一样的 -->
<link rel="stylesheet/less" href="style.less" type="text/css" />

 

        注意一下rel的值：stylesheet/less

 

        这边我来贴一些源码，看看为什么必须要按照这样的规则来：

 

 

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]);
    }
}

 

 

• 变量：

        允许我们定义一些比较通用的样式规则

/*less code*/
@width:960px;
.header{
    width:@width;
}
.footer{
    width:@width;
}


/*css code*/
.header{
    width:960px;
}
.footer{
    width:960px;
}

 

    其实我们可以发现：less中的变量只能被定义一次，前面定义的会被后面覆盖。

/*我同时定义@h*/
@h:30px;
@h:100px;
.header{
    height:@h;
}


/*输出的css*/
.header{
   height:100px;
}

 

    同时在less中，也有类似于php语言中变量的变量的概念。

 

  

//当然变量能够参与计算
@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)

     ------ 参数可以定义默认值，也可以不定义

/*可以带参数*/
.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 变量

   
.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;
}