什么是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 允许我们使用运算符进行数学运算。我们可以在代码中执行简单的计算以获得更好的输出。