熟悉CSS的同学都知道，随着时代发展CSS还延展出了一些新语言，比如SASS和LESS。但是可能很多同学并不了解他们，接下来我就会带你一起了解一下关于Css、less和Sass的相关信息。
背景 CSS（层叠样式表）是一门非程序式语言，入门学习使用非常直观方便，但是对于一些比较复杂或者重用性比较强的项目来说，因为CSS没有变量、函数、SCOPE（作用域），需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码。为了方便前端开发的工作量，出现了sass和less。 SASS和LESS SASS（英文全称：Syntactically Awesome Stylesheets）Sass 诞生于 2007 年，使用Ruby 编写，是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。 LESS（2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。 SASS和LESS****使用 传统的css可以直接被html引用，但是sass和less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件，虽然过程多了一层，但是毕竟sass/less在书写的时候就方便很多，所以在我们使用sass/less之前，只要我们提前设置好，就可以直接生成对应的css文件，而我们只需要关心我们的sass/less文件即可。 Sass的语法规则，可以参考下SASS中文网：<u>https://www.sass.hk/</u>。 SASS技术的文件的后缀名有两种形式：.sass和.scss。其实两者都是同一种东西，两种均可以可以通过编译生成浏览器能识别的css文件。这两种的区别： 1. 扩展名不同； 2.
SCSS 的语法书写和CSS 语法书写方式非常类似，.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号；
Sass 语法 $font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color SCSS 语法 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 编译出来的 CSS body { font: 100% Helvetica, sans-serif; color: #333; } LESS技术的后缀名只有一种，就是.less，语法规则和sass大同小异，详细可以参考less中文网<u>http://lesscss.cn/</u>。 LESS使用分为两种： 1.直接在浏览器中引入less编译器js文件和less文件，直接渲染编译为css文应用到当前页面中。 2.less文件通过编译成为css之后引用css； /* Less */ @color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap { color: @color; width: @width; } /* 生成后的 CSS */ #wrap {
color: #999;
width: 50%; }
了解了这些概念问题，如果你想继续深入研究的话，自然是需要大家继续努力，关于CSS、LESS和SASS的内容还有很多，还有更多的东西等待着大家挖掘，希望你不要停止自己的脚步，在前端开发的道路上越走越远。
