在vscode中使用less

在vscode扩展中找到Easy LESS

在服务端使用需要安装配置node.js

Node.js安装配置

在vscode中ctrl + shift + p 找到settings.json 进行自定义配置

    "less.compile": {
        "compress": false, // true => remove surplus whitespace 是否删除多余空白字符
        "sourceMap": false, // true => generate source maps (.css.map files) 是否创建文件目录树，true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录，后面路径自行配置。 less和css文件之间的对应关系
        "out": true, // false => DON'T output .css files (overridable per-file, see below) 是否编译输出文件
        //"outExt":".wxss",//输出文件的后缀，默认为.css 小程序中也是用less
    }

之后在编译less文件时，就会自动生成css文件了

网页需要引入自动生成的css文件，后续的维护编译less即可

less语法

变量

less

	@width: 10px;
	@height: @width + 10px;
	div{
	  width: @width;
	  height: @height;
	}

css

	div{
	  width: 10px;
	  height: 20px;
	}

混合

我们可以定义项目中通用的类，然后在其他类中引用

	.bg_red{background-color: red;}
	.div{
		color: black;
		.bg_red();
	}

这是比较常用的元素居中的方法，我们可以提前写好，然后引入到需要的类中

	.center(@type: absolute) {
		position: @type;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.div{
		width: 100px;
		height: 100px;
		.center(); // 上面设置了默认值，此处可以修改为其他值
	}

嵌套

在项目中，我们通过css选择器选取标签时，会使用一些层级关系的选择器选中需要的标签
但是当这些层级关系过于复杂时，会出现一长串的可能性，不便于阅读和维护
less模仿了html的组织结构，解决了上述的问题

	div{
		width: 100%;
		height: 300px;
		p{
			text-align: center;
			span{
				color: black;
			}
		}
	}

结合伪类来使用（&：当前选择器的父级）

	.container {
		width: 1000px;
		&::before {
			content: '';
			display: table;
		}
	}

运算

    @width: 500px;
    @height: 500mm;
    .container {
        // 单位不互通的情况下，直接将数字相加
        width: @width + 1rem;
        height: @width * 2;
        // 单位互通的时候，可以直接运算
        border-width: @height + 5cm;
    }

函数

less中写了一些函数用于实现一些功能
参考文档

作用域

LESS 中的作用域跟css非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止

	@var: red;
	#page {
	  @var: white;
	  #header {
	    color: @var; // white
	  }
	}
	#footer {
	  color: @var; // red  
	}
	

注释

	/* */ 多行注释
	// 当行注释

ps：单行注释在编译时，不会编译到css中

导入

	import "main"; //可以省略后缀
	//等价于
	import "main.less";