CSS预处理之Less

趁这几天有空，了解一下css预处理的知识

less简介

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

语法

• 变量

  声明一个变量：

@width：100px；
.test {
    width: @width;
}

• 混合

.border {
    border: 1px solid red;
}
    
.test {
    width: @box_width;
    height: 100px;
    background: #ccc;
    .border;  //直接混合使用
}    

• 嵌套

正常写法

.test {
  font-size: 10px;
}
. test a {
  color: red;
}

less 写法：

.test {
   font-size: 10px;
a {
  color: red;
  }
}

同样可以包含伪类：

.test {
    font-size: 10px;
    a {
       &:hover {
          color: blue;
       }
      color: red;
    }
}

• 运算

@width: 5px;
.test {
 width: @width + 10;  //15px
}

less能推断此处的单位

• 函数

.border_radius(@width:5px) { //5px是可选参数，表示默认值
    -webkit-border-radius: @width;
    -moz-border-radius: @width;
    -ms-border-radius: @width;
    border-radius: @width;
}
    
.test {
    .border_radius(20px);  
}

• 命名空间

.bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
}
//现在如果我们想在 .header a 中混合 .button 类，那么我们可以这样做：
.header a {
      color: orange;
      .bundle > .button;
    }

• 作用域

@var: red;
.page {
  #header {
    color: @var; // white
  }
  @var: white;
}

• 避免编译

.test {
    width: ~'calc(300px - 30px)';
}

• 注释

//不会被编译css
/**/会被编辑到css

更多使用语法，请查看less中文网。
http://lesscss.net/
个人github博客：aralic.github.io