比较好的博客文章: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{//&符号 代表父元素libackground-color: sienna;}}
}上面的代码解析成css就是:
ul li {width: 800px;background-color: orange;
}
ul li:hover {background-color: sienna;
}
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;
}