Less最佳入门实战

目录

Less——CSS预处理

可理解为一个像JQuery的js库，引入Less.js即可使用Less编译CSS。其中下文使用了的是Koala的Less预编译工具。可更方便快速简单的使用。

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

使用工具

Koala— —Less预编译

安装下载Koala ClickHere 》

自行setting语言为中文方便操作。其中拉进已经创建好有less文件的项目进入，显示结果如下图：

右键点击less设置输出路径为xxx.css,即可创建对应的文件。html引用该css文件即可。其中在less写的css通过编译对应绑定的xxx.css即也是相同代码。可选择压缩还是normal模式。

上图我设置了自动编译，则只需维护Less文件即可在浏览器看到效果！0v 0~

在antDesign pro项目直接用

默认使用less为样式文件！

知识点

注释

//该注释不会被编译
/* 该注释会被编译 */

变量

less

@testBg:blue;
@testWidth:300px;
/*变量例子出现的内容*/
body{
    width:@testWidth;
    height:@testWidth - 20;//注意，运算符左右保留空格才保证不出错（+-*/）
    background: @testBg;
}

less编译后的css

/* 该注释会被编译 */
/*变量例子出现的内容*/
body { width: 300px; height: 280px; background: #0000ff; }

混合

用于经常复用或类似的东西
less

.border{
    border: 5px solid yellow;
}

body{
    .border
}

css

.border { border: 5px solid yellow; }

带参数

.border_02(@xxx){
    border:solid 10px @xxx;
}
body{
    .border_02(#000);
}

带参数,带默认值

.border_03(@xxx:'#3399ff'){
    border:solid 10px @xxx;
}
.testborder_03{
    .border_03();
}

匹配模式

.triangle(top,@w:5px,@c:#ccc){//通过top判断上下三角
    // width:0px;
    // height: 0px;
    // overflow: hidden;
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){//通过top判断上下三角
    // width:0px;
    // height: 0px;
    // overflow: hidden;
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){//通过top判断上下三角
    // width:0px;
    // height: 0px;
    // overflow: hidden;
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
.triangle(left,@w:5px,@c:#ccc){//通过top判断上下三角
    // width:0px;
    // height: 0px;
    // overflow: hidden;
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.sangjiao{
    .triangle(top);
}

//优化匹配模式— — @_(@_为自动全部都会)
.triangle(@_,@w:5px,@c:#ccc){
    width:0px;
    height: 0px;
    overflow: hidden;
}

嵌套

.list{
    width:600px;
    margin:30px auto;
    padding:0;
    list-style:none;

    li{
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        margin-bottom: 5px;
    }
    a{
        float: left;
        //&代表上一层选择器，此处为a
        &:hover{
            color: yellow;
        }
    }
    span{
        float: right;
    }
}

@arguments变量

.border_arg(@w:30px,@c:red,@xx:solid){
    border: @arguments;
}
.testarguments{
    .border_arg();
}

避免编译

/*避免编译:避免编译自动计算了值*/
.test3{ width:~'calc(300px-30px)'; }

以上内容其实够用了，如需了解更多查看官网 LessDoc ClickHere 》

总代码

LessLearning以上全部示范代码集合下载 ClickHere 》

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>