持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
前言
sass和less在前端开发中是非常常见的，不管是vue还是react中都时常会见到，下面以vue为例来两张图看一下在vue中的使用。
sass、scss、less
sass和less都是css预处理器语言，它们的出现都是为了更好，更方便的来书写样式，（比如在css中写变量，或者是运算，甚至是编写函数）。
sass和scss的关系
sass和scss其实是同一种东西，scss是Sassy css的缩写形式，是c3语法的超集，可以理解为scss是sass的升级版本。
注意第一行，他们的区别就是一个是lang="less",一个是lang="scss" sass和scss的区别：
- 文件名不同，sass是以.sass结尾，scss是以.scss结尾
- 在写样式的时候格式也不一样，sass要遵守严格的缩进规则来书写，没有大括号和分号；而scss和我们平常书写css基本相同，也是书写大括号和分号
scss和less
- 首先是运行环境不同，scss的运行是在ruby环境下，是在服务端运行处理的，less是基于js的，既可在浏览器处理也可以在服务端处理
- 声明变量的关键词不一样，less中是使用@,scss中是使用$
- 在scss中支持写判断语句，less中不支持
- 变量的作用域也不同，less是局部作用于欧，scss是全局的
在vue中的使用
在vue项目中使用less，可以通过vue-cli创建项目的时候直接安装， 也可以自己手动安装,安装过后可以在vue.config.js文件中进行相应内容的配置和修改，如下图。
在vue中使用scss的操作也类似，如下图
总结
关于到底应该在项目中使用scss还是less的问题我相信大家应该在网上都看到过，我个人的观点是less的学习成本会更低一点，如果是刚接触预编程语言的可以先尝试一下less。当然了，就目前的环境来看sass的热度是比less的热度更高的，拥有这固定的团队在维护，用着会更加的安心。所以到底选用那种就看你的需要了。
