通过实例讲解CSS和SCSS他们的具体用法与区别？

来源 | https://www.geeksforgeeks.org/what-is-the-difference-between-css-and-scss/?ref=leftbar-rightbar

翻译 | web前端开发（ID：web_qdkf)

介绍：

CSS：级联样式表基本上是脚本语言。CSS用于设计网页。
CSS是与HTML和JavaScript一起广泛使用的最重要的Web技术。CSS的文件扩展名为.css。

SCSS：语法很棒的样式表是CSS的超集。SCSS是CSS的更高级版本。SCSS由Hampton Catlin设计，由Chris Eppstein和Natalie Weizenbaum开发。由于其先进的功能，它通常被称为Sassy CSS。SCSS的文件扩展名为.scss。

差异：

SCSS包含CSS的所有功能，并且包含CSS中不存在的更多功能，这使其成为开发人员使用它的不错选择。

SCSS充满了高级功能。

SCSS提供变量，您可以使用变量来缩短代码。与传统的CSS相比，这是一个很大的优势。

在CSS中代码如下：

body{ color: #ffffff; font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; font-size: xx-large; padding: 2rem;}

输出结果如下：

在SCSS中代码如下：

$white: #ffffff;$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
body{ color: $white; font: $ubuntu-font; font-size: xx-large; padding: 2rem;}

输出结果如下：

了解SCSS可帮助您自定义Bootstrap 4。

SASS添加了@import的功能，可让您导入自定义的SCSS文件。
例：

@import "my theme";@import "framework/bootstrap";

SASS允许我们使用嵌套语法。假设如果您必须在“页脚”的“ div”中为特定的“段落”设置样式，则绝对可以通过SASS来实现。
例：

footer {    div {        p {            margin: 2rem;            color: #2f2f2f;        }    }}

最后，使SASS成为一个不错的选择的原因是它有据可查。