【LESS系列】基本语法

这里将直接以实例的方式展示 LESS 的基本语法。

less code 是编译前的代码，css code 是编译后的代码。

本文的内容，同样是引自【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/】

 

1.变量

//less code

//定义一个变量
@border-color : #b5bcc7; 

.mythemes tableBorder{ 
  border : 1px solid @border-color; 
}

//css code

.mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
}

变量最常用的情境是定义主题，像字体颜色，背景颜色，边框样式等进行统一定义，统一定义图片资源路径也是一个不错的做法。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念。

查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

//less code

@width : 20px; 

#homeDiv { 
  @width : 30px; #centerDiv{ 
    width : @width; //此处应该取最近定义的变量 width 的值 30px 
  } 
}

#leftDiv { 
  width : @width; //此处应该取最上面定义的变量 width 的值 20px 
}

//css code

#homeDiv #centerDiv { 
  width: 30px; 
}

#leftDiv { 
  width: 20px; 
}

 

2.混合Mixins

//less code

//定义一个模块
.roundedCorners(@radius:5px) { 
  -moz-border-radius: @radius; 
  -webkit-border-radius: @radius; 
  border-radius: @radius; 
} 

#header { 
  .roundedCorners; 
}

#footer { 
  .roundedCorners(10px); 
}

//css code

#header { 
  -moz-border-radius:5px; 
  -webkit-border-radius:5px; 
  border-radius:5px; 
}

#footer { 
  -moz-border-radius:10px; 
  -webkit-border-radius:10px; 
  border-radius:10px; 
}

从上面的例子我们可以看出，LESS 的 Mixins 特性支持传参，默认值定义，我个人觉得如果你不是概念强迫症患者的话，完全可以把它当成是样式函数来理解。

除此之外，Mixins 也能像 Javascript 那样使用 arguments 变量，只是有一点点小区别。

在 LESS 里，@arguments 变量表示所有的变量，很多时候通过使用它，我们可以少写很多代码，请看下面例子：

//less code

//定义一个模块
.boxShadow(@x:0, @y:0, @blur:1px, @color:#000){ 
  -moz-box-shadow: @arguments; 
  -webkit-box-shadow: @arguments; 
  box-shadow: @arguments; 
}

#header { 
  .boxShadow(2px, 2px, 3px, #f36); 
}

//css code

#header { 
  -moz-box-shadow: 2px 2px 3px #f36; 
  -webkit-box-shadow: 2px 2px 3px #f36; 
  box-shadow: 2px 2px 3px #f36; 
}

 

3.值运算

//less code

@init: #111111; 

@transition: @init*2; 

.switchColor { 
  color: @transition; 
}

//css code

.switchColor { 
  color: #222222; 
}

对于一些数值型的值，LESS 是支持进行加减乘除四则运算的。

此外，LESS 还提供了一组函数，专门针对颜色运算操作。

lighten(@color, 10%); //颜色淡化
darken(@color, 10%); //颜色加深
saturate(@color, 10%); //饱和度增加 
desaturate(@color, 10%); //饱和度降低
fadein(@color, 10%); //透明度增加
fadeout(@color, 10%); //透明度降低
spin(@color, 10); //色调调整（+10）
spin(@color, -10); //色调调整（-10）

这组函数直接返回具体的色值，看下面实例：

//less code

@init: #f04615;

#body { 
  background-color: fadein(@init, 10%); 
}

//css code

#body { 
  background-color: #f04615; 
}

 

4.嵌套规则

<div id="home"> 
  <div id="top">top</div> 
  <div id="center"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
  </div> 
</div>

//less code

#home{ 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; #top{ 
    border: outset; 
    width: 90%; 
  } 
  #center{ 
    border: outset; 
    height: 300px; 
    width: 90%; #left{ 
        border:outset; 
        float: left; 
        width: 40%; 
      } 
      #right{ 
        border: outset; 
        float: left; 
        width: 40%; 
      } 
   } 
}

//css code

#home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
} 
#home #top { 
  border: outset; 
  width: 90%; 
} 
#home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
} 
#home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
} 
#home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
}

我们平时在编写 css 的时候，经常会遇到多层选择器嵌套的情况。

从上面的例子可以看出，LESS 可以用很简洁的代码来实现，有着更好的可读性。

同时，我们还可以使用 “&” 来进行同一层级的操作，比如组合类和伪类。

//less code

.link{
  text-decoration: none; &.red{
    color: #f00;
  }
  &:hover{
    text-decoration: underline; 
  } 
}    

//css code
.link{
  text-decoration: none;
}

.link.red{
  color: #f00;
}

.link:hover{
  text-decoration: underline; 
}