SCSS或SASS是什么,和CSS有什么区别?

什么是SCSS      

SCSS 是一种被中断或编译成 CSS 的预处理器语言。它是一种特殊类型的SASS(Syntactically Awesome Style Sheets)。SCSS 的脚本是在 Saasscript 中完成的。SCSS 包含 CSS 的所有功能，还添加了一些额外的特殊功能。

　　使用 SCSS，我们可以向 CSS 添加许多附加功能，例如变量、嵌套等。与编写传统 CSS 相比，所有这些附加功能可以使编写 CSS 变得更加容易和快捷。

　　SCSS 生成浏览器可以通过在运行 Web 应用程序的服务器上运行 SCSS 文件来理解的传统 CSS。在 SASS 或 SCSS 中阅读代码比在 CSS 中阅读要快。

SASS和SCSS的关系：

sass和scss其实是一样的css预处理语言，其后缀名是分别为 .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;
}

CSS和SCSS的比较

　　1.SCSS 更具表现力——SCSS 在其代码中使用的行数比 CSS 少，这使得代码加载速度更快。

　　2.它鼓励规则的正确嵌套——标准 CSS 不支持嵌套。我们不能在另一个类中编写一个类。随着项目变得越来越大，这带来了可读性问题，并且结构看起来不太好。

　　3.语法 – SCSS 的语法包含 CSS 中缺少的缩进。

　　4.SCSS 允许用户编写更好的内联文档——SASS 可以灵活地添加注释，但任何优秀的开发人员都会更喜欢 SCSS 中提供的内联文档。内联文档使代码行不言自明。

　　5.更好的功能——在 SCSS 的帮助下，我们可以以 CSS 中不存在的变量、选择器和嵌套的形式向代码添加更多功能。

　　6.自定义 Bootstrap – 了解 SCSS 有助于自定义 Bootstrap 4。

　　7.数学运算——SCSS 允许我们使用运算符进行数学运算。我们可以在代码中执行简单的计算以获得更好的输出。