Less的使用

Less使用

1.什么是less

2.less有什么用

3.怎么使用less

4.less批量生成代码

less简介

1.less是基于css的一个插件

2.传统css里编辑代码的时候需要不停的选中子代才能进行操作比如下面这样

这是传统css的样子

     
 


div{
  margin:0;
}
需要对里面span进行操作的时候
div>span{
  color:red;
}

显然这样很麻烦，代码多起来的时候更加的让人头 疼，需要取很多class名

而less是这样的

 


样式里面可以这样写
div{
  span{
  color:red;
  }
}

显而易见less大大提高了我们编程的简便性

3.怎么去使用less

1.安装less

• 首先得安装node.js（node.js可以在官网上安装）

• 安装好node.js后shift+右击调出命令窗口，npm i less -g

• 使用Visual Studio的可以在安装完node.js后可以直接在扩展里面搜索下载

• 如何创建第一个less, index.less 文件以less结尾

• less会自动生成css文件

• 当然引用样式的时候还是引用css的，less只是方便我们操作的根据

2.配置less在指定的文件夹里生成css文件

• 打开用户自定义设置

• 在自定义里设置，或在setting.json文件夹里添加下列代码

 "less.compile": {
        "compress": true, // true => remove surplus whitespace
        "sourceMap": false, // true => generate source maps (.css.map files)
        "out": "../css/", // false => DON'T output .css files (overridable per-file, see below)
    }

3.测试是否可以生成到指定的文件夹里

4.less批量生成代码

• 应用场景,在编写公共样式需要敲大量同样的代码的时候

@0px: 0px;
.ml-loop(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {
  .ml@{val} {
    margin-left: @val + @0px;
  }
  .ml-loop(@list, (@i+1));
}
@marginLeft: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 24, 30, 40, 48, 50, 75;
.ml-loop(@marginLeft);

• 查看css代码的时候,由于是less编辑的代码，会成一条线排，需要展开的话还需要下载格式化插件