LESS基础用法

LESS 语法:

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情

变量

设置变量，封装样式：

@main-color: #5B83AD;

使用变量：

body{
    background: @main-color;
}

结果如下：

body {
  background: #5B83AD;
}

混合

在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性.
那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:

// Less
.bordered {
  border-top: dotted 1px black;
}
#menu a {
  color: #111;
  .bordered;
}

// 输出
.bordered {
  border-top: dotted 1px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;

带参数混合

在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#header{
  .border-radius(6px)
}
// 输出
#header {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用

// Less
.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;
}

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

.list {
    width: 10rem;
    margin: 3rem auto;
    padding: 0;
    font-size: 16px;
    li {
        height: 1.5rem;
        line-height: 1.5rem;
        margin-bottom: 0.375rem;
        padding: 0 0.375rem;
    }
    p {
        float: left;
        color: #333;
        &:hover {
            //&代表上一层选择器
            color: red;
        }
    }
}
//输出
.list {
  width: 10rem;
  margin: 3rem auto;
  padding: 0;
  font-size: 16px;
}
.list li {
  height: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: 0.375rem;
  padding: 0 0.375rem;
}
.list p {
  float: left;
  color: #333;
}
.list p:hover {
  color: red;
}

运算

// Less
@base: 5%;
@filler: @base * 2;

#head{
  color: #888 / 4;
  height: 100% / 2 + @filler;
}

// 输出
#head {
  color: #222222;
  height: 60%;
}

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

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

// 输出
#page #header {
  color: #ffffff;
}
#footer {
  color: #ff0000;
}#page #header {
  color: #ffffff;
}
#footer {
  color: #ff0000;
}