less和scss语法详解

比较好的博客文章：Less使用语法（详细）：https://blog.csdn.net/weixin_44646763/article/details/114193426
SCSS基本语法：https://www.jianshu.com/p/4efaac23cdb6

总结：我理解的点：
1、@符号声明变量
2、变量插值使用@{}表示
3、父元素选择器（&）
ul{
    li{
        width: 800px;
        background-color: orange;
        &:hover{//&符号 代表父元素li
            background-color: sienna;
        }
    }
}

上面的代码解析成css就是：
ul li {
  width: 800px;
  background-color: orange;
}
ul li:hover {
  background-color: sienna;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4、使用extend实现继承
5、混合器 mixin

.mixin{
	border: 1px solid #f0f0f0;
}
.useMixin{
	color: #555;
	.mixin;
}

编译css结果：

.mixin {
  border: 1px solid #f0f0f0;
}
.useMixin {
  color: #555;
  border: 1px solid #f0f0f0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17