Less css 介绍

猫性男孩

原创文章，转载请注明出处:
http://www.hellohtml5.com/2010/06/less-css.html

CSS是个很强大的东西，同时在使用过程中又会感觉到过于拘谨。
Lesscss由此诞生了，它支持使用如下方式书写CSS，Twitter上甚至有人说这样的书写方式应该被内置于CSS核心中，我非常赞同。
1.引入变量的概念到CSS中。

/* 用@符号定义CSS中的变量，类似于PHP中的$ */  
@brand_color: #4D926F;   
#header {  
   /* 引用此变量 */  
   color: @brand_color;  
}  
h2 {  
   color: @brand_color;  
}  
2.支持混合书写。

/* 定义圆角效果 */  
.rounded_corners (@radius: 5px) {  
   -moz-border-radius: @radius;  
   -webkit-border-radius: @radius;  
   border-radius: @radius;  
}  
   
#header {  
    /* 引用圆角效果 即插入圆角效果的代码块 */  
   .rounded_corners;  
}  
   
#footer {  
   .rounded_corners(10px);  
}  
3.全新的层级式定义。

#header {  
   color: red;  
   a {  
     font-weight: bold;  
     text-decoration: none;  
   }  
}  
/*
相当于如下经典CSS样式:
#header{color:red;}
     #header a{font-weight: bold;text-decoration: none;}
*/  
4.支持操作符。

/* IE浏览器中有类似的概念，但是由于各大浏览器不兼容，使用的很少 */  
@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呢，显然现在是不能直接使用这些代码的，浏览器并没有给予内置的支持。
lesscss官方有一个在Google code上的项目Less.js

Less.js的主页在:
http://code.google.com/p/lesscss/

less.js可以动态解析lesscss格式的样式表，

<!-- 引入less.js -->  
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>  
<!-- 引入less样式,注意rel属性格式,样式表用.less做扩展名,而不是.css -->  
<link rel="stylesheet/less" href="style.less" />  
<!-- HTML文档 -->  
你的HTML文档  

这里有篇使用Lessjs的教程
http://net.tutsplus.com/tutorial ... -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，那就拭目以待吧。