参考:https://www.geeksforgeeks.org/what-is-the-difference-between-css-and-scss/

CSS 教程CSS 示例

了解:

CSS:级联样式表基本上是脚本语言。  CSS用于设计网页。
 CSS 是最重要的 Web 技术,与 HTML 和 JavaScript 一起被广泛使用。  CSS 的文件扩展名为 .css。
 SCSS : Syntactically Awesome Style Sheet 是 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;
}

$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 文件。

SASS 允许我们使用嵌套语法。  假设您必须在 'footer' 中的 'div' 中设置特定的 'paragraph' 样式,您绝对可以通过 SASS 来做到这一点。
 例子

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

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

 CSS 是网页的基础,通过样式化网站和 Web 应用程序用于网页开发。您可以按照本 CSS 教程CSS 示例从头开始学习 CSS。