教你快速入门SASS并使用SASS

SASS是"语法很棒的样式表(Syntactically Awesome Style Sheet)"的缩写。它是对层叠样式表(CSS)的升级。 Sass是CSS预处理器。它与每个CSS版本完全兼容。 Sass减少了CSS的重复, 因此节省了时间。它由Hampton Catlin设计, 由Natalie Weizenbaum在2006年开发。Sass免费下载和使用。

先决条件：

• HTML
• CSS

工作:web浏览器并不理解Sass代码本身。这就是为什么您需要一个Sass预处理器来将Sass代码更改为简单的标准CSS。

注意：翻译是用于获取一种语言的源代码输入并将其转换为另一种语言的输出的术语。

文件类型：所有Sass文件必须具有" .scss"文件扩展名。

注释：Sass支持标准CSS注释" / *注释* /", 并且它还支持嵌入式注释" //注释".

例子：

/* Define fonts using variables */
$font_ 1: Algerian;
$font_ 2: Times New Roman;
  
.main {
     font : $font_ 1 ;
}

这将导致以下CSS输出：

/* Define fonts using variables */
.main {
	font: Algerian;
}

系统要求和SASS安装：

• 操作系统：Sass是平台无关的。
• 浏览器支持：Sass可在Edge / IE(来自IE 8), Firefox, Chrome, Safari, Opera中使用。
• 编程语言：Sass基于Ruby。

有关Sass和安装的更多信息, 请访问Sass官方网站https://sass-lang.com/

Sass的基本示例。

让我们假设一个网站基本上具有3种字体。如果必须一次又一次地写相同的字体样式, 那将是一团糟。不用一遍又一遍地写字体值, 你可以使用下面的Sass。

例子：

$font_ 1: Algerian;
$font_ 2: Times New Roman;
$font_ 3: Serif ;
   
.main  {
     font : $font_ 1 ;
}
   
.menu -1 {
     font : $font_ 2 ;
}
   
.menu -2 {
     font : $font_ 3 ;
}

这将导致以下CSS输出：

.main {
	font: Algerian;
}

.menu-1 {
	font: Times New Roman;
}

.menu-2 {
	font: Serif;
}

---