CSS 和 SCSS 有什么区别？

介绍

• 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 。

区别：

1. SCSS 包含了 CSS 的所有特性，并且包含了更多 CSS 中没有的特性，这使得它成为开发人员使用它的一个不错的选择。
2. SCSS 充满了高级功能。
3. 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;
     }
     

     输出：
     

4. 了解 SCSS 可以帮助您自定义 Bootstrap 4。
5. SASS 添加了@import 的功能，它允许您导入自定义的 SCSS 文件。
   例子：

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

6. SASS 允许我们使用嵌套语法。假设您必须在 ‘footer’ 的 ‘div’ 中设置特定的 ‘paragraph’ 样式，您绝对可以通过 SASS 来完成。
   例子：

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

7. 最后，使 SASS 成为一个很好的选择的原因是它有很好的文档记录。