css、sass和scss的区别

CSS 层叠样式表

行内式：将CSS代码书写在HTML标签的style属性中。style是一个通用属性，每一个标签里面都拥有这个属性，规则：
<标签名 style=”属性:值;属性:值;”>
嵌入式：将CSS代码嵌入到HTML文件中，嵌入式是通过HTML中的
外链式：写以.css扩展名的文件，然后在标签中使用标签，将css文件链接到html文件中，规则：
<标签名 style=”属性:值;属性:值;”>

css预处理器

css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。

Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。

Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目， 其后缀是.sass。

SCSS (Sassy CSS)，一款css预处理语言

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名为 .scss。
多行注释: 使用 /**/ 写入。多行注释都保留在CSS输出。
单行注释: 使用 // 跟着注释。单行注释不会保留在CSS输出

sass和scss的区别

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。

示例代码

// sass
        #sidebar
          width: 30%
          background-color: #faa
        // scss
        #sidebar {
          width: 30%;
          background-color: #faa;
        }