简介

说明

本文介绍Scss，包括：Scss是什么、Scss与Sass的区别等。

官网网址1

官网网址2

官网：https://www.sass.hk/

官网文档（中文）：https://www.sass.hk/docs/

Scss与CSS在线互转

Scss转CSS：https://www.sassmeister.com/

Sass是什么

Sass介绍

Sass是为了使CSS开发更方便而产生的，可以称为：动态样式语言。也可以称为：CSS预编译语言。

原先我们是用原生CSS来写样式，但它不方便，比如：不支持嵌套、运算、作用域等。

使用Scss写样式很方便，它支持嵌套、运算、作用域等，最终它会被处理为原生的CSS来处理样式。

Sass的特色功能

Scss(sassy css)是Sass（(Syntactically Awesome Stylesheets)的改良版本。

Sass的语法是：使用缩进。这对于写惯css的开发者来说很不直观，也不能将css代码加入到Sass里面。因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)，与原来的语法兼容，只是用{}取代了原来的缩进。而且，所有有效的 CSS 也同样都是有效的 SCSS。

Sass 支持两种不同的语法。两种语法可以互相加载，所以选择哪一种语法取决于你和你的团队。

SCSS 语法使用 .scss 文件扩展名。除了极少部分的例外，它是 CSS 的超集，也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。由于其与 CSS 的相似性，它是最容易上手的语法，也是最流行的语法。

Scss是这样的：

$border-color:#aaa; //声明变量
.container {
	$border-width:1px;
    border:$border-width solid $border-color; //使用变量
}

缩进语法是 Sass 的原始语法，因此它使用文件扩展名 .sass 。由于这个扩展名的原因，这种语法有时直接被称为 “Sass"。缩进语法支持与 SCSS 相同的所有特性，但是它使用缩进而不是花括号和分号来描述文档的格式。

通常，在 CSS 或 SCSS 中书写花括号时，对应着在缩进语法中再缩进一层即可。任何一行结束，都被当作分号。

缩进语法是这样的：

$border-color:#aaa; //声明变量
.container
  $border-width:1px;
  border:$border-width solid $border-color; //使用变量