less(二)

一、变量

在前面介绍的案例中已经使用了“变量”的概念，是不是感觉和 js 很像，事实上 less 就是用 js 的写法来写 css。

官网在介绍变量的时候会给出很多应用场景，总结一下就是使用 @ 符号定义变量，使用 @ 符号获取变量，仅仅将 @变量名 看成是一个字符串。

@color: red;
.main{
    background-color: @color;
}

二、混合

(1)混合也是减少代码书写量的一个方法；

(2)混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；

(3)混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果，看个人习惯

.bordered() {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#menu span {
     height: 16px;
     .bordered;
}
 
#menu p {
     color: red;
     .bordered();
}

三、函数

.border-radius(@radius) { 
   -webkit-border-radius: @radius; 
   -moz-border-radius: @radius;
   border-radius: @radius;
 }
 #header { 
   .border-radius(4px);
 } 
.button {
  .border-radius(6px);
 }
可以看到，这里就用到了函数的概念，在 #header 和 .button 中分别传入不同的参数，结果也就生成不同的代码。

关于 less 中函数的写法还有以下几种：

// 函数的参数设置默认值： 
.border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius; 
}
 // 函数有多个参数时用分号隔开 
.mixin(@color; @padding:2) { 
    color-2: @color;
    padding-2: @padding; 
}
 // 函数如果没有参数，在转译成 css 时就不会被打印出来，详见上面混合中的示例 .wrap() { 
    text-wrap: wrap;
 } 
// 函数参数如果有默认，调用时就是通过变量名称，而不是位置 
.mixin(@color: black; @margin: 10px; @padding: 20px) { 
  color: @color; 
  margin: @margin; 
  padding: @padding; 
} 
.class1 {
   .mixin(@margin: 20px; @color: #33acfe);
 }
 // 函数参数有个内置变量 
@arguments，相当于 js 中的 arguments 
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
   -webkit-box-shadow: @arguments;
   -moz-box-shadow: @arguments;
   box-shadow: @arguments; 
} 
// 函数名允许相同，但参数不同，类似于 java 中多态的概念 
.mixin(@color: black) { }
.mixin(@color: black; @margin: 10px) {}

四、父子元素的写法

在 Less 写法如下，父子嵌套关系一目了然。

.container {
    padding: 0;
    .article {
        background-color: red;
    }
}

在 less 中写法如下，可以看到引入了新的符号 &，以 & 来代替主类

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

五、 @import

在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。

创建 one.less 文件：
.container {
  width: 100px;
  height: 200px;
}
创建 two.less 文件(import文件a)：
@import "one";

@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中。