欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于less的一些研究

程序员文章站 2022-07-13 23:08:33
...

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

相关标签: less研究