wxya（个人网站）Less和Scss
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
LESS 和 SCSS 的区别
相同点：
- LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
- 都可以通过自带的插件，转成相对应的css文件。
- 都可以参数混入，可以传递参数的class，就像函数一样
- 嵌套的规则相同，都是class嵌套class
不同点：
声明和使用变量
LESS用@符号，SCSS用$符号表示
示范：
变量插值
LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式
作用： 可以用为LESS和SCSS声明变量，变量作为css的选择器
示范：
LESS:
SCSS:
SCSS支持条件语句，LESS不支持
SCSS可以使用if{}else，for循环等等，LESS不支持
示范：
应用外部css文件方式不同
SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件
示范：
颜色函数
调整色相的话，LESS使用spin（）的函数；SCSS使用名为adjust_hue()的函数
示范：
LESS:
SCSS:
引用父选择器&符号的使用
LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制
示范：
LESS：
SCSS:
总结：
SCSS和LESS都是一种基于css之上的高级语言，两者之间各有优点，sass在功能上面比LESS更强大，LESS比较的清晰明了，容易上手，主要是看大家的工作中，更倾向于使用那个进行开发，两者都能够大大提高书写代码的效率
Loading...