想必大家学习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文件。这两种的区别：

扩展名差别；

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></u>。

LESS使用分为两种：

直接在浏览器中引入less编译器js文件和less文件，直接衬着编译为css文应用到当前页面中。

2.less文件通过编译成为css之后引用css；

/* Less */

@color: #999;

@bgColor: skyblue;//不要添加引号

@width: 50%;

#wrap {

color: @color;

width: @width;

}

/* 生成后的 CSS */