十分钟学会less的基本用法

一、十分钟学会Less

概览

less (Leaner Style Sheets的缩写) 是一门向后兼容的CSS扩展语言。这里呈现的是Less的官方文档（中文版），包含了Less语言以及利用Javascript开发的用于将Less样式转换成CSS样式的Less.js工具。

在Node.js环境中使用Less：

npm install -g less
//验证安装成功
lessc -version //lessc 3.12.2 (Less Compiler) [JavaScript]

将less编译成css文件

//也可使用vscode自带插件
lessc style.less style.css

关于用法

1、定义变量

//定义变量
@main-color: cyan;
.bgColor {
    background: @main-color;
}

2、嵌入样式

//嵌入样式
.border {
    border: 1px solid #ccc;
}
.box {
    .border;
    background: skyblue;
}

3、定义函数 mianButton(@bgcolor) 传递参数 pink

//定义函数
//参数传递
.mainButton(@bgcolor) {
    background: @bgcolor;
}
//默认参数
.border-top(@color: red) {
    border-top: 10px solid @color;
}
.redButton {
    .mainButton(pink);
    .border-top();
    text-align : center;
    line-height: 100px;
}

4、@_ 匹配模式封装三角形样式

//向上三角
.triangle(top, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}

//向下三角
.triangle(bottom, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

// 向左三角
.triangle(left, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}

// 向右三角
.triangle(right, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}

//@_是固定格式，表示不管你匹配到谁，都会带上这些内容
.triangle(@_, @w: 0.3125rem, @c: #ccc) {
    width: 0;
    height: 0;
    overflow: hidden;
}

// 用法
.triangle(right,@w:1.6vw,@c:#fff);

5、运算

//运算
@small-width:10px;
.small{
    width:2*@small-width;
}

6、嵌套规则

//嵌套规则
.list{
    width:10rem;
    li{
        height:1.5rem;
    }
    p{
        color:cyan;
        &:hover{
            //&代表上一层选择器，这里指代p标签
            color:skyblue;
        }
    }
}

7、arguments 自动填充所有变量

//arguments的好处就是可以自动帮你填充所有变量
.border(@width:1px,@color:cyan,@style:solid){
    border:@arguments
}
//调用样式
.box{
    .border(2px);
}

//渲染结果
.box{
    border:2px cyan solid;
}

二、Less注意事项

1）注释问题

/*编译后会被保留*/
//编译后不会被保留

2）less同样适用 !important

//border所有样式都会带上 !important
.box{
    .border(2px) !important;
}

3）避免编译符号 ~

在字符串前加上一个~即可用一些less不认识的专有语法或者一些不正确的css语言。

// 这里显然不是要用less去计算
.height{
    height:calc(300px - 30px);
}

// 加上避免编译符号
.height{
    height: ~'calc(300px - 30px)';
}

关于less的一些基础用法就总结到这里了，喜欢记得点个关注。