最近有做前端的小伙伴咨询丁老师，网站中使用的不是只有css吗？怎么现在还有Less和Scss，这些都是什么，和CSS有什么区别呢？今天丁老师介绍一下。

CSS
CSS就是传统的网站样式表，是Cascading Style Sheet的缩写，即层叠样式表，是控制html样式的文件，在css中，可以对各种id、class进行样式定义，包括颜色、字体、高度、间距等，是构成网页UI的基本元素，是构成网站的最基本文件。任何网站都需要css，没有css的网站是没有样式的。css不仅能用于html网页，也适用于以小程序、APP等开发终端，不管是html还是vue、react，又或是Android、IOS开发，css都是实现UI样式的最基本文件。

Less
Less文件是css文件的预处理器， 是在css的语法基础上扩展了编程功能，可以在less中使用变量、函数等编程语言，弥补了原生css对编程支持不足的缺点。Less默认兼容所有css语法，相当于是css的增强版。less一般适用于以Vue、React、Angular等前端框架开发的项目，less文件不能被浏览器识别，需要通过工具编译为css。

Scss
和Less一样，Scss也是css文件的预处理器，也是在css基础上kuo扩展了变量、嵌套、混合、控制流、函数等编程功能，也是需要编译为css才可以被浏览器识别，简单的来说，Scss是增强版的css，比Less功能更丰富、更强大。因其功能丰富、生态完善，比较适合中大型项目以及样式逻辑复杂的场景，是前端项目中主流的css预处理器。

三者的区别
Css
1.原生css样式表，不需要编译就可以直接适用于html、vue、react、angular、android、ios等框架平台，包含最基础的样式功能，目前最核心最规范的版本是Css 3。
2.变量仅支持var()，作用域受限，ie浏览器不兼容。
3.无嵌套语法，多个同样的选择器需要重复写。
4.仅支持calc()函数进行基础运算，无其他函数。
5.适用于html网页、网站，以及传统的软件项目。

Less
1.浏览器不能直接识别，需要编译为css才可以。
2.变量以@开头，支持全局/局部变量，支持运算，编译后可以直接替换值。
3.支持嵌套语法，&符号代表父选择器，简单易懂。
4.无需使用calc函数即可直接运算，并且内置部分颜色和尺寸函数。
5.适用于以vue、react为前端框架的快速开发中小型项目。

Scss
1.浏览器不能直接识别，需要编译为css才可以。
2.变量以$开头，支持变量作用域、插值、类型判断，功能更强。
3.支持嵌套语法、父选择器扩展、嵌套媒体查询。
4.支持复杂运算，内置属百个基础函数，包含颜色、数学、字符串等，支持自定义函数。
5.适用于以vue、react为前端框架，且包含组件化开发的中大型项目。

公司企业官网开发制作 送服务器 免费维护