Less预处理语言的基本使用

1.在less中的注释

  • 以 // 开头的注释,不会被编译到css文件中
  • 以 /**/ 包裹的注释会被编译到css文件中

2.less的变量

  • 使用@声明一个变量
/* 使用 @ 声明一个变量 */
@vari: blue;
  • 作为属性值来使用上面声明的变量,直接使用 @vari
/* 作为属性值来使用上面申明的变量,直接使用 @vari */
.wrap {
	background: @vari;
}
/* 等价于 */
.wrap {
	background: blue;
}
  • 作为选择器属性名使用,使用时以@{ 变量名 }的形式
/* 声明变量 */
@select: .wrap;
@mar: margin;

/* 使用变量 */
@{select} {
	@{mar}: auto;
}

/* 等价于 */
.wrap {
	margin: auto	
}
  • 作为URL使用,变量值需用""括起来,使用时同样用@{ 变量名 }的形式
@imgurl: "./src/img/";

.wrap {
	background: url("@{imgurl}logo.png");
}

/* 等价于 */
.wrap {
	background: url("./src/img/logo.png");
}
  • 变量的延迟加载

变量是延迟加载的,使用前不一定要预先声明,也可以使用后定义的变量

.warp {
	color: @green
}

@green: green;
  • 定义多个相同变量名

规则:同一变量名定义多次时,只会使用最后一次定义定义的变量。less会先从当前作用域中向上查找,当前作用域找不到时会到它的父级查找,但不会在它的子级目录下查找。

@color: red;
.wrap {
	@color: green;
	.content {
		@color: yellow;
		color: @color;  /* color: blue */
		@color: blue;
	}
	color: @color;   /* color: green */
}

5.less的嵌套规则

  • 基本嵌套规则
.wrap {
	text-align: center;
	.content: {
		font-size: 16px;
	}
}

/* 编译后 */
.wrap {
	text-align: center;
}
.wrap .content {
	font-size: 16px;
}
  • &符号的使用,用于伪类选择器的嵌套
.wrap {
	margin: auto;
	.content {
		background: red;
	}
	&:hover {
		background: blue;
	}
}

/* 编译后 */
.wrap {
	margin: auto;
}
.content {
	background: red;
}
.content:hover {
	background: blue
}

6.less中的混入

  • 普通混合
/* 以 . 开头定义混合 */
.juzhong {
	position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
}
.wrap {
	position: relative;
	width: 400px;
	height: 400px;
	background: purple;
	/* 假设 content1和 content2 都需要居中,因此有很多重复代码 */
	.content1 {
		.juzhong;  /* 调用混合 */
		background: pink;
	}
	.content2 {
		.juzhong;  /* 调用混合 */
		background: yellow;
	}
}
  • 带参数混合
/* 定义带参数混合 */
.juzhong(@w, @h, @c) {
	position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: @w;
		heigth: @h;
		background: @c;
}
.wrap {
	position: relative;
	width: 400px;
	height: 400px;
	background: purple;
	.content1 {
		.juzhong(200px, 200px, pink);  /* 调用混合并传入参数 */
	}
	.content2 {
		.juzhong(100px, 100px, yellow);  /* 调用混合并传入参数 */
	}
}
  • 带参数并有默认值的混合
.juzhong(@w:50px, @h:50px, @c:pink) {
	position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: @w;
		heigth: @h;
		background: @c;
}
.wrap {
	position: relative;
	width: 400px;
	height: 400px;
	background: purple;
	.content1 {
		.juzhong(200px, 200px, pink);  /* 调用混合并传入参数 */
	}
	.content2 {
		.juzhong();   /* 带有默认值的参数,可以不传实参使用默认值 */
	}
}
  • 命名参数
.juzhong(@w:50px, @h:50px, @c:pink) {
	position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: @w;
		heigth: @h;
		background: @c;
}
.wrap {
	position: relative;
	width: 400px;
	height: 400px;
	background: purple;
	.content1 {
		.juzhong();
	}
	.content2 {
		.juzhong(@c: black);  /* 指定参数传递 (命名参数)*/
	}
}
发布了6 篇原创文章 · 获赞 0 · 访问量 52
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览