当前位置: 首页 >> HTML+CSS >> LESS使用简介

LESS使用简介

发表时间:2014-09-16 17:08  |  2条评论  |  点击数:1562  |  作者:jws132

一直以来,都是使用JS扩展的比较多还没有使用过CSS的扩展,最近看到一个CSS的扩展叫做LESS;LESS最早是1个ruby的gem,用于扩展css的语法,前段时间出来了一个JS版的,看看先。

使用方法:

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

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

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

值得注意的是link的type属性必须要是text/less,之前用习惯了text/css结果死活就是没有效果。切记切记。

HTML的基本代码如下:

  1. "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. "http://www.w3.org/1999/xhtml">

  3. "Content-Type" content="text/html; charset=utf-8" />
  4. LESS CSS

  5. "text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />



  6.     "div1">TEST1...
  •     "div2">TEST2...
  •     "div3">TEST3...
  •     "div4">
  •         
  •             SPAN
  •         
  •         SPAN
  •     
  •     "div5">TEST5...
  •     "div6">TEST6...


  • 后面的样式都是在那个LESS.less文件中所定义。

    1.定义变量

     
    1. @colors:#333;
    2. .div1
    3. {
    4.     color:@colors;
    5.     font-weight:bold;
    6.     background-color:#CCC;
    7. }

    这样就可以实现:当需要修改颜色的时候只需要修改一处即可。

    2.样式内嵌

     
    1. .div3
    2. {
    3.     border:#222 solid 1px;
    4.     .div1
    5. }

    这样可以直接嵌入.div1的样式而无须复制代码了。

    3.嵌套规则

     
    1. @fonts:12px;
    2. .div4
    3. {
    4.     border:#333 solid 1px;
    5.     padding:10px;
    6.     div
    7.     {
    8.         background-color:red;
    9.         span
    10.         {
    11.             color:red;
    12.         }
    13.     }
    14.     span
    15.     {
    16.         background-color:@colors;
    17.         font-size:@fonts * 2;
    18.     }
    19. }

    这样可以使样式的名称更为的简短,并且修改的时候好找一些,因为都在一块嘛。

    4.样式运算

    代码见嵌套规则代码中的最后一个span标签的font-size属性。

    好处类似于定义变量的好处。

    5.样式传参

     
    1. .div5(@widths:5px)
    2. {
    3.     color:red;
    4.     border-style:solid;
    5.     border-color:@colors;
    6.     border-width:@widths;
    7. }
    8. .div6
    9. {
    10.     .div5(10px);
    11. }

    这个的好处就不言而喻了吧?个人最喜欢这个的啦。类似于编程语言中的函数定义、调用、传参。呵呵,很是惬意咧…(如需DEMO,请狂点此处不知道为什么,LESS.less这个文件明明是存在的,服务器上就是找不到[报的404错误],可能是服务器阻止解析less结尾的文件吧。不过没关系,我已经将它打包好了,需要的话,大家可以将其下载自行使用IIS浏览,DEMO在此。)

    LESS官方网站:http://lesscss.org/

    LESS原理:

    LESS js版本的是使用ajax获取LESS.less文件,然后根据该文件中所定义的规则生成最终浏览器能理解的css,然后再将其插入到html代码中。所 以就出现前面说过的必须在js前面。

    PS:可能是因为安全限制的原因,IE和Chrome无法查看到LESS的效果的(报的是HTTP404错误),必要的话,大家可以用IIS或者是FireFox、Opera、Safari来浏览。

    基于LESS JS版本的实现原理,是每次请求都需要通过JS去动态生成原始的css,那么如果css比较大的话,对于客户端的性能影响比较大,所以个人觉的LESS的js版本实用性不强。

    网友评论 2条评论
      
    • 全部评论
    • 站主信息
    网名:小白 | ゞ_Shuつ
    姓名:蒋文书
    生日:1990-05-22
    籍贯:浙江省—温州市
    现居:北京市—昌平区
    职业:网站设计、网站制作。今后想成为一名高级程序员
    爱好:研究java,php编程,打球,唱歌,登山。
    喜欢的书:《红与黑》《红楼梦》
    喜欢的歌手:黄家驹 Rain 六哲
    网站信息:本站正在完善中下步会新增用户中心预计完成在7月中旬
    • 热门关注
    • 资深旅游达人,走南闯北,半年写完超长游记...

    • 资深旅游达人,走南闯北,半年写完超长游记...

    • 资深旅游达人,走南闯北,半年写完超长游记...

    • 最新评论
    • 【聚会】22日跟大闽网友一起看世界杯,小龙虾啤酒通通免费吃...[详细]

    • 【福利】带孩子玩水不要钱!50份白水洋套票免费送了...[详细]

    • 【福利】熬夜看球太累太伤?没关系!养生粤菜免费吃起来...[详细]

    • 【独家】送福利来了,空调挂机免费清洗,快来回帖报名吧...[详细]

    • 【独家】猜世界杯冠军,8套1088元纯金纪念钞免费送! ...[详细]

    Copyright © 2013-2016 . 蒋文书个人博客 版权所有 浙ICP备16006289号