- .border-radius (@radius: 5px) {
- border-radius: @radius;
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- }
- #header {
- .border-radius;
- }
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; } |
注意 less 中的变量为完全的“常量”,所以只能定义一次。
2、混合
混合就是定义一个 class,然后在其他 class 中调用这个 class。
- .common{
- color: red;
- }
- .nav{
- background: #ccc;
- .common;
- }
输出:
- .common {
- color: red;
- }
- .nav {
- background: #ccc;
- color: red;
- }
Css 中的 class, id 或者元素属性集都可以用同样的方式引入。
3、带参数混合
在 less 中,你可以把 class 当做是函数,而函数是可以带参数的。
- .border-radius (@radius) {
- border-radius: @radius;
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- }
- #header {
- .border-radius(4px);
- }
- .button {
- .border-radius(6px);
- }
最后输出:
- #header {
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- }
- .button {
- border-radius: 6px;
- -moz-border-radius: 6px;
- -webkit-border-radius: 6px;
- }
我们还可以给参数设置默认值:
.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { |
最后输出:
#header { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
也可以定义不带参数属性集合,如果想要隐藏这个属性集合,不让它暴露到CSS中去,但是还想在其他的属性集合中引用,就会发现这个方法非常的好用:
- .wrap () {
- text-wrap: wrap;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- word-wrap: break-word;
- }
- pre {
- .wrap
- }
输出:
pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } |
混合还有个重要的变量@arguments。
@arguments 包含了所有传递进来的参数,当你不想处理个别的参数时,这个将很有用。
- .border(@width:0,@style:solid,@color:red){
- border:@arguments;
- }
- .demo{
- .border(2px);
- }
输出:
.demo { border: 2px solid #ff0000; } |
混合还有许多高级的应用,如模式匹配等。在这里就不介绍了,只讲些基础的东西。
4、嵌套规则
Less 可以让我们用嵌套的方式来写 css。下面是我们平时写的 css: