关于less的知识点

1.下载依赖less和less-loader 或者 在创建项目时选定
npm install less@3.9.0 -g
npm install less-loader@4.1.0 -g
注意版本信息:在package.json文件中可查看
关于less的知识点
文章图片

备注:卸载方法 npm uninstall less
2.检查是否安装成功
lessc -v
3.成功
关于less的知识点
文章图片

4.引用

5.使用

  1. less中允许以变量的形式来定义,定义:@x:xx; 使用:@x;
    @color:red; @x:100px; .home{ width:@x; height: @x; background: @color; }

    效果:
    关于less的知识点
    文章图片

  2. 多层嵌套+变量计算
    @x:120px; .home{ width: @x; height:@x; background: red; .box1{ width: @x/2; height:@x/2; background: green; .box2{ width: @x/3; height:@x/3; background: blue; } } }

    效果:
    关于less的知识点
    文章图片

  3. 混合=函数
    //定义一个函数; .test(@color:red,@size:14px){ background: @color; font-size: @size; } //不传参,使用默认的; .box1{.test()} // 给函数传参; .box2{.test(@color:green,@size:30px)} //修改一个参数 .box3{.test(@color:#46ff17)}

    效果:
    关于less的知识点
    文章图片

  4. 可以对高度、宽度、角度进行计算
    @k:20px; ul{ list-style: none; li{ border:1px solid ; margin:10px 0 ; } li:nth-child(1){ width: @k; height:@k; } li:nth-child(2){ width: @k + @k; height:@k; } li:nth-child(3){ width: @k * 2; height:@k; } }

    【关于less的知识点】效果:
    关于less的知识点
    文章图片

    推荐阅读