华为od面试（社招）

技术面（包括一面，二面，三面）

会根据简历上面有的内容去提问，会问到做的项目，遇到哪些问题，怎么解决

1. less相比css的优势

（1）嵌套 逻辑清楚 代码简洁

// less
.father {
   
    height: 300px;
	.sun {
   
		height: 200px;
	}
}
// css 的写法更加的冗余
.father {
   
	height: 300px;
}
.father .sun {
   
	height: 200px;
}

（2）变量

/** 1. 作为属性值*/
@width: 30px;
div {
   
	width: @width;
}
/** 2. 作为类名*/
@father: 'father'
.@{
   father} {
   
	width: 20px;
}
/** 3. 作为路径使用*/
@imgs: './img';
.father {
   
	background: url("@{imgs}/222.jpg");
}
/** 4. 作为属性名称使用*/
@w: "width";
.father {
   
	@{
   w}: 30px;
}
/** 5. 可变变量（了解）*/
@w: '30px';
@a: 'w';
.father {
   
	width: @@a;
}

（3）extend伪类

// 写法1：
// 编译前
.nav {
   
	width: 30px;
}
.sun {
   
	/** &表示父级元素*/
	&:extend(.nav)
	height: 30px;
}
// 编译后
.nav, .sun {
   
	width: 30px;
}
.sun {
   
	height: 30px;
}

// 写法2：
// 编译前
.nav {
   
	width: 30px;
}
.sun:extend(.nav) {
   
	height: 30px;
}
// 编译后
.nav, .sun {
   
	width: 30px;
}
.sun {
   
	height: 30px;
}

（4）混合Mixins

// 1. 创建类选择器或者id选择器（类选择器或id选择的样式依旧有效）
.color, #color {
   
	width: 30px;
}
// 编译前
.box {
   
	#color();
}
#box {
   
	.color()