Less的使用
2019-03-21 本文已影响0人
樊小勇
Less使用
1.什么是less
2.less有什么用
3.怎么使用less
4.less批量生成代码
less简介
1.less是基于css的一个插件
2.传统css里编辑代码的时候需要不停的选中子代才能进行操作比如下面这样
这是传统css的样子
<body>
<div><span> </span></div>
</body>
div{
margin:0;
}
需要对里面span进行操作的时候
div>span{
color:red;
}
显然这样很麻烦，代码多起来的时候更加的让人头 疼，需要取很多class名
而less是这样的
<body>
<div><span></span></div>
</body>
样式里面可以这样写
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编辑的代码，会成一条线排，需要展开的话还需要下载格式化插件
