CSS革命：用Sass/SCSS引领前端创新

前言

在现代的前端开发中，CSS已成为呈现网页和应用程序样式的核心。然而，原生的CSS语法在大型项目中可能变得混乱、冗长且难以维护。
为了解决这些问题，SCSS（Sass CSS）和Sass（Syntactically Awesome Style Sheets）应运而生。
本文将带你简单了解sass和scss。

sass中文网
scss中文网

SCSS

SCSS（Sass CSS）是一种CSS预处理器，它扩展了普通的CSS语法，提供了更强大、更灵活的功能。
SCSS使用类似于CSS的语法，并引入了变量、嵌套、混合、继承等概念，使得CSS代码更易于编写和维护。

1. 变量（Variables）：您可以使用变量来存储颜色、字体、间距等重复使用的值，并在需要的地方引用它们。这样可以简化代码，方便统一修改。

   $primary-color: #007bff;.button {background-color: $primary-color;
   }
   

2. 嵌套选择器（Nested Selectors）：可以在SCSS中嵌套选择器，以减少代码量，改善可读性。

   .container {width: 100%;.title {font-size: 24px;}
   }
   

3. 混合（Mixins）：混合是一段可重用的代码块，可以像函数一样在需要的地方引用。它可以包含任意数量的属性和样式。

   @mixin flexbox {display: flex;justify-content: center;align-items: center;
   }.container {@include flexbox;
   }
   

4. 继承（Extend）：可以通过继承样式来减少重复的CSS代码。

   .button {border: 1px solid #ccc;padding: 10px;
   }.primary-button {@extend .button;background-color: #007bff;color: #fff;
   }
   

5. 导入其他文件（Import）：可以将SCSS代码拆分到多个文件中，并使用@import指令将它们导入到主文件中。

   // main.scss
   @import "variables";
   @import "buttons";
   

6. @content 是 Sass/SCSS 中的特殊指令，用于在自定义的混入(Mixin）中传递代码块。通过使用 @content，可以将一个或多个代码块传递给混入，并在混入中使用这些代码块。

   @mixin media-query($size) {@media (max-width: $size) {@content;}
   }.container {width: 100%;@include media-query(768px) {background-color: #f5f5f5;}
   }
   

   编译后的 CSS 代码如下所示：

   .container {width: 100%;
   }@media (max-width: 768px) {.container {background-color: #f5f5f5;}
   }
   

   应用: 创建适应不同屏幕尺寸或其他条件的样式。

以上只是SCSS的一小部分功能和用法。SCSS还提供了更多的功能，如条件语句、循环、函数等，以及灵活的配置选项,更多内容见scss中文网。

---

Sass

Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了普通的CSS语法，并提供了更多的功能和特性。
Sass与SCSS非常相似，实际上，SCSS是Sass的一种语法扩展，可以说是更加兼容和易于学习的版本。

以下是一些Sass的特性和用法：

1. 变量（Variables）：在Sass中，使用变量来存储重复的值，例如颜色、字体大小、间距等，并在需要的地方引用它们。

   $primary-color: #007bff.buttonbackground-color: $primary-color
   

2. 嵌套选择器（Nested Selectors）：在Sass中嵌套选择器，以减少代码量和改善可读性。

   .containerwidth: 100%.titlefont-size: 24px
   

3. 混入（Mixins）：混入是一段可重用的代码块，在需要的地方引用它们。与SCSS类似，混入可以包含任意数量的属性和样式。

   @mixin flexboxdisplay: flexjustify-content: centeralign-items: center.container@include flexbox
   

4. 继承（Extend）：Sass允许通过继承样式来减少重复的CSS代码。

   .buttonborder: 1px solid #cccpadding: 10px.primary-button@extend .buttonbackground-color: #007bffcolor: #fff
   

5. 导入其他文件（Import）：您可以将Sass代码拆分到多个文件中，并使用@import指令将它们导入到主文件中。

   // main.sass
   @import variables
   @import buttons
   

---

Sass 和 SCSS 的区别

• Sass：

  • 使用缩进来表示层级关系，没有大括号和分号。
  • 通过空行、缩进和冒号来表示属性和值的关系。
  • 嵌套选择器使用父级选择器后跟子级选择器的方式，可以减少代码量。
  • 没有必要写单位，如可以直接写 margin: 10，Sass 会自动添加单位。
  • 变量定义符号为 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 声明，通过 @include 引用。
  • 文件后缀名为 .sass。

  // main.sass$primary-color: #007bff.containerwidth: 100%.titlefont-size: 24px.buttonbackground-color: $primary-color
  

• SCSS：

  • 使用花括号和分号来表示层级关系和语句结束。
  • 属性和值之间使用冒号来进行分隔。
  • 嵌套选择器使用普通的 CSS 语法，以大括号表示。
  • 需要明确写明单位，如 margin: 10px。
  • 变量定义符号为 $，例如 $primary-color: #007bff。
  • 混入使用 @mixin 声明，通过 @include 引用。
  • 文件后缀名为 .scss。

  // main.scss$primary-color: #007bff;.container {width: 100%;.title {font-size: 24px;}
  }.button {background-color: $primary-color;
  }
  

• 无论是Sass还是SCSS，最终都会被编译为普通的CSS代码

  /* main.css */.container {width: 100%;
  }.container .title {font-size: 24px;
  }.button {background-color: #007bff;
  }