关于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;
} 
 
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值