PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

CSS预处理器 Less CSS

CSS预处理器 Less CSS

来源:phperz.com  作者:phper  发布时间:2012-04-26
LessCSS是一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 使用lesscss你需要在网页中引入官方提供的less.js文件 LESS

LessCSS是一种 动态 样式 语言.

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

使用lesscss你需要在网页中引入官方提供的less.js文件

LESS可以这样来写CSS:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}


在引入less.js前先要把你的样式文件引入 :

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

LessCSS下载:http://lesscss.org


延伸阅读:
3款新鲜的CSS3&HTML5框架
36 个 CSS 框架推荐
Tags: LessCSS   预处理器   css  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号