SASS 简介



SASS 简介

SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,有助于减少CSS的重复,节省时间。 它是更稳定和强大的CSS扩展语言描述文档的风格结构。

Sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。

在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

Sass是一个将脚本解析成CSS的脚本语言,即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”,与Haml类似[3],使用缩进来区分代码块,并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。

Sass是CSS预处理器之一,它能让你更好的、更轻松的工作。 Sass 以简为美,简约至上

Sass 对自己的定位首先是一个预处理器。其最主要的竞争对手包括 LESS,一个基于 Node.js 的预处理器,因著名 CSS 框架 Bootstrap 的使用而声名鹊起。

此外还有 Stylus ,一种对形式无所限制的 LESS 版本。它是一种无论怎样使用,大都能顺利转换成 CSS 的程序语言。

历史

它最初由 Hampton Catlin 设计,并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chris Eppstein 初始版本用SassScript扩展Sass。

为什么要使用SASS?

它是预处理语言,它为CSS提供缩进语法(它自己的语法)。

它提供了一些用于创建样式表的功能,允许更有效地编写代码和易于维护。

它是超集的CSS,这意味着它包含CSS的所有功能,是一个开源的预处理器,以 Ruby 编码。

它提供了比平面CSS好的结构格式的文档样式。 它使用可重复使用的方法,逻辑语句和一些内置函数,如颜色操作,数学和参数列表。

特征

  • 它是更稳定,强大,与CSS的版本兼容。
  • 它是超集的CSS和基于JavaScript。
  • 它被称为CSS的语法糖,这意味着它使用户更容易阅读或表达的东西更清楚。
  • 它使用自己的语法并编译为可读的CSS。
  • 你可以在更少的时间内轻松地编写CSS代码。
  • 它是一个开源的预处理器,被解释为CSS。

优点

  • 它允许在编程结构中编写干净的CSS。
  • 它有助于编写CSS更快。
  • 它是CSS的超集,帮助设计师和开发人员更有效率和快速地工作。
  • 由于Sass兼容所有版本的CSS,我们可以使用任何可用的CSS库。
  • 可以使用嵌套语法和有用的函数,如颜色操作,数学和其他值。

缺点

开发人员需要时间了解此预处理器中存在的新功能。

如果更多的人在同一个网站上工作,那么将使用相同的预处理器。 有些人使用Sass,有些人使用CSS直接编辑文件。 因此,它将变得难以与现场工作。

有机会失去浏览器的内置元素检查器的好处。

Sass Or SCSS

Sass 最初定义的语法,其中决定性的特征是缩进敏感。很快,Sass 的维护者决定提供一个被称为 SCSS(Sassy CSS)的语法以弱化 Sass 和 CSS 之间的差异。

从那时起,Sass(预处理器)开始提供两种不同的语法:Sass(非全大写,please),也被称为缩进语法,和 SCSS。使用哪一种语法完全取决于你,两者在功能上是完全等同的,只是在审美上有所偏颇。

Sass 的空白敏感语法通过缩进以摆脱大括号、分号和其他符号,从而实现了简洁凝练的语法格式。与之相比,SCSS 则更容易学习,因为它只是在 CSS 上添加了一点点额外的功能。

我自己更喜欢 SCSS,因为它更接近 CSS 的原生面貌,对开发者来说具有友好性。因此,样式指南全文将使用 SCSS 而不是 Sass 语法格式来演示。你可以通过左侧的可选面板切换到 Sass 的缩进语法