less让css具有动态语言的特性

Less 是一种样式语言，它将 css 赋予了动态语言的特性，如变量、继承、运算、函数。less 既可以在客户端上运行（支持IE 6+, Webkit, Firefox），也可以借助 Node.js 或者 Rhino 在服务端运行。
Less 做为 css 的一种形式的扩展，它并没有阉割 css 的功能，而是在现有的 css 语法上，添加了很多额外的功能，所以对于前端开发人员来所，学习 less 是一件轻而易举的事情。我们先看下用 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 的情况下，我们并不知道这些代码是做啥用的，怎么生成我们所熟悉的 css 代码，以上代码经过 less 编译后：

复制代码

代码如下:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

下面我们就一起来学习 less 吧。
我们知道如果要使用 jquery 就必须在页面上引进 jquery 库，同样的在使用 less 编写 css 代码时，也要引进 less 库——less.js。点击这里下载 less 库。
下载好后只要在页面中引入就可以了。

复制代码

代码如下:
<link rel="stylesheet/less" type="text/css" href="style.less" media="all" />
<script type="text/javascript" src="less.js"></script>

要注意外部引进样式的方法有所改变，rel 属性值为 stylesheet/less，样式的后缀变为 .less 同时 less 样式文件一定要在 less.js 前先引入。
引入了 less 之后，正式开始学习 less。
LESS 语法
1、变量
Less 的变量充许你在样式中对常用的属性值进行定义，然后应用到样式中，这样只要改变变量的值就可以改变全局的效果。和 javascript 中的全局变量有点类似。
甚至可以用变量名定义为变量。

复制代码

代码如下:
@color: red;
@foot: 'color';
.head{
color: @color;
}
.foot{
color: @@foot;
}

输出：

复制代码

代码如下:
.head {
color: red;
}
.foot {
color: red;
}

上一篇：IE6789,FF之间Css Hack整理

下一篇：CSS3实现DIV圆角效果完整代码

发表评论

共有条评论