less入门教程

参考链接
less客户端安装：

<link rel="stylesheet/less" tyle="text/css" href="style.less"><!-- less样式文件一定要在引入less.js前先引入 -->
<script src="less.min.js"></script>
<script>less.watch()</script><!-- 开启监视模式 --> 

npm编译：
1.安装nodejs；
2.全局安装less npm install less -g；
3.进入要编译的less所在目录，（shit+鼠标右键）打开命令窗口；
4.编译 lessc style.less > style.css；
5.压缩参数 lessc style.less > style.css -x ；

less使用：
1.变量：
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。

//申明
@c-orange:#ff6600;
@f18:font-size:18px;

//调用
.class{
    background-color: @c-orange;
    border:1px solid @c-orange;
    font-size:@font-size;
}

---

2.嵌套
LESS 可以让我们以嵌套的方式编写层叠样式。

.class{
    font-family:"microsoft yahei";
    .btn{
        display:inline-block;
        text-align: center;
        padding:@p15;
        border-bottom:@border+2 solid @c-white;
        background-color:@c-orange+#111;
        color:@c-white;
        //如果你想写串联选择器，而不是写后代选择器，就可以用到"&"了
        &.confirm{
            color:red;
            background:#ddd;
        }
        &:hover{
            color:#fff;
            background:#666;
        }
}

---

3.混合：
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

3.1 单参数混合

//申明
.classA(@radius:5px){
    border-radius:@radius;
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
}

//调用
.classB{
    font-size:18px;
    //默认5px
    .classA;
}

.classC{
    //传参数 10px
    .classA(10px);
}

3.1 多参数混合（@arguments变量）

//申明
.box-shadow(@x:0,@y:0,@z:6px,@color:rgba(0,0,0,.6)){
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

//调用
.class{
    .box-shadow(0,1px,8px);
}

---

4.命名空间：
简而言之，将参考容器内元素的样式属性进行封装，并灵活调用。

<div class="div1">
    <a class="btn1">btn1</a>
</div>
<div class="div2">
    <a class="btn2">btn2</a>
</div>

.div1{
    .btn1{
        display:inline-block;
        text-align:center;
        padding:2px 10px;
        background-color:#ff6600;
        color:#fff;
        font-size:15px;
        margin-top:10px;
        &:hover{
            background-color:#999;
            color:#666;
        }
    }
}
.div2{
    .btn2{
        //调用(copy)div1内的btn1的样式
        .div1 > .btn1;
    }
}

---

5.运算：

<div class="containner">
    containner
    <p class="content">content</p>
</div>

@c-orange:#ff6600;
@c-white:#fff;
@width:300px;
.containner{
    background-color:@c-orange;
    color:@c-white;
    width:@width;
    padding:20px;
    text-align: left;
    .content{
        //颜色运算
        background-color:lighten(@c-orange,30%);
        border:4px solid @c-orange + #333;
        //尺寸运算
        width:@width/2;
        height:@width/4;
        line-height:@width/4;
        margin:0 auto;
    }
}

---

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

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

---

7.javascript表达式:
JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号(英文键盘状态下tab上面的那个按键)的方式使用。

@str:`"china".toUpperCase() + '!'`;
.msg:before{
    content:@str; //CHINA!
    height:35px;
    width:100px;
}

---

8.字符串插值:
变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构。

@base-url: "https://ss0.bdstatic.com";
.msg{
    width:271px;
    height:130px;
    //注意别漏加‘{}’号
    background:#fff url("@{base-url}/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png") center no-repeat;
    background-size: 100% 100%;
}