工具的使用

编辑器：HBuilderX.exe 插件：

图片.png 修改插件配置，以达到自动编译并保存CSS的目的

图片.png 修改数据：

{
	"name": "less",
	"id": "compile-less",
	"displayName": "less编译",
	"version": "1.0.4",
	"engines": {
		"HBuilderX": "^1.0.0"
	},
	"external": {
		"type": "node",
		"programPath": "${pluginPath}",
		"executable": "/node_modules/.bin/lessc",
		"programName": "less",
		"commands": [
			{
				"id": "LESS_COMPILE",
				"name": "编译less",
				"command": [
					"${programPath}",
					"${file}",
					"${fileBasename}.css"
				],
				"extensions": "less",
				"key": "",
				"showInParentMenu": false,
                                //将这行改为true
				"onDidSaveExecution": true
			}
		]
	},
	"dependencies": {
		"less": "3.9.0"
	},
	"extensionDependencies": [
		"npm"
	],
	"description": "编译less为css。uni-app编译或对文件右键-外部命令编译时使用"
}

在html中，写入style标签，如下所示：

<style lang="less"></style>

重启编辑器，即可自动保存

less初体验

// less中单行注释，注释中的内容不会被解析到CSS中
.box1{
	background-color: #BBFFAA;
	
	.box2{
		background-color: #ff0;
		
		.box4{
			color: red;
		}
	}
	
	.box3{
		background-color: orange;
	}
}

// 变量，在变量中可以存储一个任意的值
// 变量的语法：@变量名
@a:100px;
@b:#bfa;
// 作为类名
@c:box6;

.box5{
	// 使用变量时，如果直接使用，则以变量@变量名的形式即可
	width: @a;
	color:@b;
}


// 作为类名使用时，或者一部份值使用时，必须以@{变量名}的形式是使用
.@{c}{
	width: @a;
	background-image: url("@{c}/1.png");
}

@d:200px;
@d:300px;
@e: 335px;
div{
	width: @d;
	height: @e;
}

div{
	width: 300px;
	// 直接引用属性
	height: $width;
	
}

自动生成的CSS代码如下：

.box1 {
  background-color: #BBFFAA;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: #bfa;
}
.box6 {
  width: 100px;
  background-image: url("box6/1.png");
}
div {
  width: 300px;
  height: 335px;
}
div {
  width: 300px;
  height: 300px;
}

片段二：

.box1{
	.box2{
		color: red;
	}
	
	>.box3{
		color: red;
		&:hover{
			color: blue;
		}
	}
	
	// 为box1设置hover
	// &表示外层的父元素
	&:hover{
		color: orange;
	}
	
	div &{
		width: 100px;
	}
}

.p1{
	width: 100px;
	height: 200px;
}


// extend（）扩展， 对当前选择器扩展指定选择器的样式
.p2:extend(.p1){
	color: red;
}

.p3{
	// 直接对指定样式进行引用，这里就相当于将p1的样式在这里进行了复制
	// mixin  混合
	.p1();
}

// 使用类选择器时，可以在选择器后添加一个括号，这时我们实际上就创建了一个mixins
// 类似于函数的作用，作为被调用的对象
.p4(){
	width: 100px;
	height: 100px;
	background-color: #bfa;
}

.p5{
	.p4();
}

自动生成的CSS代码如下：

.box1 .box2 {
  color: red;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}
div .box1 {
  width: 100px;
}
.p1,
.p2 {
  width: 100px;
  height: 200px;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
.p5 {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

LESS学习之路

工具的使用

less初体验