• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
BearRui(AK-47)
花开有时,错过了一日便错过了一季,就象人生错过了相遇,就不再找寻到美丽的相聚
博客园    首页    新随笔    联系   管理    订阅  订阅
LESS 让css也支持变量,运算符,include,嵌套规则等等
最近在网上看到1个很有意思的CSS扩展,这里介绍给大家。LESS 最早是1个ruby的gem,用于扩展css的语法,用了LESS后,可以在css中使用变量,运算符,include,嵌套规则等等。现在LESS出了js版本,让我们一起来看看LESS能为我们带来什么吧?

  最近在网上看到1个很有意思的CSS扩展,这里介绍给大家。LESS 最早是1个ruby的gem,用于扩展css的语法,用了LESS后,可以在css中使用变量,运算符,include,嵌套规则等等。现在LESS出了js版本,让我们一起来看看LESS能为我们带来什么吧?

 

使用

   1. 下载js: http://lesscss.googlecode.com/ 最新版本好像是 1.0.22

   2. 使用less,css文件的后缀名需要改为.less。

   3. 在html页面中加入下面代码

     <!-- style.less文件就是样式表文件,并且style.less必须放在less-1.0.22.min.js文件前加载,原理后面介绍 -->

     <link rel="stylesheet/less" href="style.less" />  

     <script src="less-1.0.22.min.js"></script>

 

变量

   变量可以让我们声明1个常量值,并在以后多处地方进行重复使用。

 

   一般css写法:

   .class1{
      color:#ccc;
      width:100px;
   }
   
   .class2{
      color:#ccc;
      width:120px;
   }

 

   LESS写法:
   @color1: #ccc;
   
   .class1{
      color:@color1;
      width:100px;
   }
   
   .class2{
      color:@color1;
      width:120px;
   }

inlucde
    大家一定碰见过再某个规则中需要用的部分样式跟另外1个规则样式一样,但没办法,我们只能copy过来,或者为元素指定多个class。但用了LESS后,我们不再需要这么痛苦了。
    
    一般css写法:
   .red{
     color:red;border:1px solid red;
   }
   
   .class2{
      width:100px;font-size:12px;
      /*下面的样式跟red的一样,copy过来的,修改就要修改2处*/
      color:red;border:1px solid red;
   }
 
    LESS写法:
   .red{
     color:red;border:1px solid red;
   }
   
   .class2{
      width:100px;font-size:12px;
      /*直接inlcude .red的规则*/
      .red
   }

嵌套规则:
  一般css的写法:
   #header{color:red;}
  #header .logo{backgroud-image:url(logo.gif);}
  #header li{display:block;} 
      LESS写法:
   #header{
     color:red;
     .logo{
         backgroud-image:url(logo.gif);
      }
      li{
        display:block;
      } 
   }

运算符:
  LESS 写法:
    @fontSize 12px;
    .class1{
	font-size : @fontSize + 2;
    }
    .class2{
	font-size : @fontSize * 2;
    }

更多其它功能:
  请见LESS官方网站:http://lesscss.org/

原理分析:
  LESS js版本的实现方式是使用ajax获取style.less文件,然后根据该文件的规则生成最终浏览器能理解的css插入到html代码中。所以就出现前面说过的<link rel="stylesheet/less" href="style.less" />必须在js前面。

总结:
  LESS JS版本的实现原理,是每次请求都需要通过JS去动态生成原始的css,如果css比较大的话,对于客户端的性能影响比较大,所以个人觉的less的js版本实用性不强。
  不知道LESS 的ruby版本的实现原理是怎么样的,我认为如果真的觉得less方式可以提高css的开发效率,到是可以参考它的代码实现一套java或net的源代码,在程序启动的时候一次根据.less文件生成所有的css文件,而不是每次请求都用js动态生成。

 

PS:刚刚无意间搜索,竟然找到1个net版本的less,大家可以看看这个版本怎么实现的:http://www.dotlesscss.com/
[作者]:BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.
posted on 2010-07-01 08:49  BearRui(AK-47)  阅读(14800)  评论(29)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3