less的常用语法简介

less语法

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言

less可以写css所有语法

而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一 下面就简单介绍一下Less的部分用法

变量（Variables）

less转化方式

node + webpack ： 工程化用
less.js 转成 css 
考拉 转成
vscode 插件 转化
复制代码

less嵌套语法

html结构

    <div class="parent">
        <div>
            less
            <span>less</span>
        </div>        
        <span>hahahas</span>
    </div>
    <div class="parent2">
        <div>
            简介
        </div>
复制代码

less样式

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.parent{
    background: #ccc;
    // parent 里边的所有div
    div{
        color:red;
        font-size: 30px;
        span{
           color:#fff; 
        }
    }
}
.parent2 div{
    color: #ccc;
}
复制代码

less 变量

w:200px;
// 声明一个 w 变量(自己声明)  代表 200px;
// @w:200px  var w = '200px'; 支持四则运算
h:300px;
img:'../img/';// 若是路径 需要我们用的是 用@{}
w:400px;
// 变量的值 是可以被覆盖的；
b:box;
.@{b}{
    // @w:600px;// 声明变量 有 作用域的概念
    width: @w;
    height: @w - 100;
    line-height: @w;
    background: url('@{img}1.jpeg');
    float: left;
    @w:600px;
}
.box2{
    width: @w;
}
复制代码

###less混合

w:300px;// 这是宽度
.lt{
    float: left;
}
.rt{
    float: right
}
.of{
    overflow: hidden;
}
.fff{
    background: #ccc
}
#ddd{
    .fff;
    width: @w;
    height: @w;
    div{
        background: #ccc;
        font-size: 30px;
    }
}
.pub{
    width: 100px;
    height: 100px;
}
.parent{
    div{
        background: lightcoral;
    }
    #ddd;// 这种混合 也会把子元素的样式拿过来
    .pub;
}

.parent3:extend(#ddd){
    // 只获取  #ddd  自己的样式 
    // 不会获取 #ddd儿子的样式
    background: red;
}
复制代码

###less 函数以及 循环

// 函数
.w(@a:400px,@b:400px){
    width: @a;
    height: @b;
}
.parent{
    .w(200px,300px)
}
.parent2{
    .w(200px)
}

#ddd(){
    width: 200px;
    height: 300px;;
}
.parent3{
    #ddd();
}


// 循环
.w1(@n,@cor:#ccc) when(@n < 50){
    .box_@{n}{
        width: 200px * @n;
        height: 200px * @n;
        background: @cor;
    }
    .w1(@n+10,@cor)
}
.w1(10,red);

复制代码