Css、less和Sass（SCSS）的区别(转载)

Syntactically 

 

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>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%;

 

  }

 

关于SASS和LESS的概念就是这样，如果想要继续深入了解更详细语法，恐怕就得多花功夫了，不过，学好SASS和LESS对你的前端发展绝对是有很大帮助的