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: @a;
    background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;

// 就近原则 下面d为300px
div{
    // 变量发生重名时，会优先使用比较近的变量
    width: @d;
    height: @e;
}
// 可以在变量声明前就使用变量
@e:335px;

div{
    width: 300px;
    // 取和width相同的值
    height: $width;
}
           

2、嵌套

.box1{
.box2{
    color: red;
}
>.box3{
    color: red;
    &:hover{
        color: red;
    }
}
// 为box1设置hover 
// &表示外层父元素
&:hover{
    color: red;
}
}
           

3、extend和mixins

p1{
    width: 100px;
    height: 200px;

}

// extend对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: red;
}
.p3{
    // 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
    //mixin混合
    .p1();
}


// 使用类选择器时可以在选择器后添加一个括号，这时实际上我们就创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
}

.p5{
    .p4();
}
.p5{
    .p4;
}
           

4、混合函数

// 混合函数 混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
   width: @w;
   height:@h;
   border: 1px solid red;
   background-color: @bg-color;
}
div{
   // 调用混合函数按顺序传递
   // .test(200px,300px,#bfa);
   // .test(@bg-color:red, @h:100px, @w:200px)
   .test(300px);
}
           

三、Less的其他用法

span{
    // average取颜色的平均值
    color: average(red,yellow);
}

body:hover{
// darken加深颜色
background-color: darken(#bfa,20%);
}


//将其他的less引入到当前less中
@import "syntax2.less";

.box1{
// 在less中所有的数值都可以直接进行运算
// + - * /
    width: 100px/2;
    height: 100px*2;
    background-color: #bbffaa;
}