Less css

CSS是个很强大的东西，同时在使用过程中又会感觉到过于拘谨，Lesscss因此诞生了，它支持更丰富的CSS表达方式。Twitter上甚至有人说这样的书写方式应该被内置于CSS核心中，我非常赞同。

一、引入变量的概念到CSS中。

 /* 用@符号定义CSS中的变量，类似于PHP中的$ */
    @brand_color: #4D926F; 
    #header {
      /* 引用此变量 */
      color: @brand_color;
    }
    h2 {
      color: @brand_color;
    }

二、支持混合书写。

/* 定义圆角效果 */
.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
   /* 引用圆角效果 即插入圆角效果的代码块 */
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

三、全新的层级式定义。

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
/*
相当于如下经典CSS样式:
#header{color:red;}
    #header a{font-weight: bold;text-decoration: none;}
*/

四.支持操作符。

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer { 
  color: (@base-color + #111) * 1.5;
}

那么该如何使用Less css呢?。

显然现在是不能直接使用这些代码的，浏览器并没有给予内置的支持。Less.js可以动态解析lesscss格式的样式表，Less.js的主页在:http://code.google.com/p/lesscss/

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

你的HTML文档

这里有篇使用Lessjs的教程http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js/

另外，如果你使用OSX开发，你也可以使用Less.app，这个程序可以嵌入到Mac平台的文本编辑器里，帮你导出Less样式表到经典样式表。Less.app的官方主页在 http://incident57.com/less/

感觉目前最有前途的调用方式是这样的。

<link type="text/css" href="make/less/to/css/less_css_path" />

不过目前需要后台编程语言的支持，或许以后的浏览器会原生的支持Less方式的CSS，鉴于大多数人都喜欢Less方式的CSS，那就拭目以待吧。