Less入门基础，快速复习

安装与使用

• npm install g less
• 插件easyless
• 创建一个less文件后，vs会自动在同一个路径下创建一个由less编译成的css文件，并且在写less时候实时编译
• 在html文件里引用编译的css文件即可

---

语法

• 注释
  • //编译后不出现在css里
  • /**/编译后出现在css里
• 声名变量
  • @变量名:变量值;
• 使用变量
  • 当值使用：直接@变量名使用
  • 当属性使用：用@{变量名}使用
• 延迟加载
  • 先进行变量声明再使用，和js同理（两个变量之间用了变量，以最好一次声明的值为准）
  • 也有作用域说法,类似js，如下

 .id{
   @a:1;
   width:@a;//2
   @a:2;
   ._.__id{...}
   }
  }

• &的使用
  • 使得里面的和外面的减少一个空格
  • 当给一个类名加伪类时，若写成

.id{
  :hover{}
}    

这样编译出来就会是.id :hover {}//编译错误

• 因该这样写

.id{
  &:hover{}
}   

这样编译出来就会是.id:hover {}//编译正确

---

混合mixin

less文件中可以引入其他less文件@import

• 普通混合：这个混合会在css文件里编译出.mixin

.mixin {
	width: 100px;
	height: 100px;
	background-color: red;
}
.demo {
	.mixin;
}

• 不带输出的混合：这个混合不会在css文件里编译出.mixin

.mixin() {
	...
}

• 带参数的混合

.mixin(@w) {
	width: @w;
	...
}
.demo {
	.mixin(100px);
}

• 带参数的混合,并且参数有默认值

.mixin(@w:100px) {
	width: @w;
	...
}
.demo {
	.mixin();
}

• 带多个参数的混合

.mixin(@w:100px,@h,@c) {
	width: @w;
	...
}
.demo {
	.mixin(100px,1,2);
}

• 命名参数

.mixin(@w:100px,@h,@c:red) {
	width: @w;
	...
}
.demo {
	.mixin(@h:200px);
}

• 匹配模式

.mixin(first, @w: 200px, @h) {
	width: @w;
	height: @h;
	background-color: blue;
}
.mixin(second, @w: 100px, @h) {
	width: @w;
	height: @h;
	background-color: red;
}
.demo2 {
	.mixin(first, @h: 200px);
}
.demo3 {
	.mixin(second, @h: 200px);
}

• 实参列表:用的少

.mixin(@1,@2,@3) {
	border: @arguement;
	...
}
.demo {
	.mixin(1px,solid,red);
}

---

运算

只需要一个带单位即可

div{
width:(100 + 100px);
}

---

继承

• 第一种写法

.demo5 {
	width: 100px;
	height: 150px;
	background-color: pink;
}
.demo5:hover {
	background-color: black;
}
.demo6 {
	&:extend(.demo5 all);
	.demo6_1 {
		border: 1px solid black;	
	}
}

• 第二种写法

.demo5 {
	width: 100px;
	height: 150px;
	background-color: pink;
}
.demo5:hover {
	background-color: black;
}
.demo6:extend(.demo5 all); {
	.demo6_1 {
		border: 1px solid black;
	}
}

• 加关键词all表示继承这个类的所有东西，包括伪类
• 不加的话只继承样式

---

避免编译

• width:(100-20px)编译为width:80px
• width:~'(100-20px)'less不编译，交给浏览器处理
  …