Less的基本用法

一、Less简介

	less是一门CSS的预处理语言
    less是一个css的增强版，通过less可以编写更少的代码
    实现更强大的样式
      在less中添加了许多新特性，像对变量的支持、对mixin的支持....
      less的语法大体上和css语法一直，但less中增加了许多对css扩展
          浏览器无法直接执行less代码，要执行必须先将less转换为css再由
          浏览器执行
   	Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，
    如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，
    也可在服务端运行 (借助 Node.js)。

二、Less的基本用法

1、变量

body{
background-color: #bbffaa;
.box2{
    background-color: red;
    .box4{
        background-color: blue;
    }
    }
    .box3{
        background-color: orange;
    }
    
}
// 变量：在变量中可以存储一个任意的值
// 并且可以在需要时，任意改变变量的值
//变量的语法：@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    // 使用变量时如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}

// 作为类名或者一部分值使用时必须以@{变量名}的形式使用
.@{c}{
    width: &#