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
   
   .button
     background-color: $primary-color
   

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

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

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

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

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

   .button
     border: 1px solid #ccc
     padding: 10px
   
   .primary-button
     @extend .button
     background-color: #007bff
     color: #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
  
  .container
    width: 100%
  
    .title
      font-size: 24px
  
  .button
    background-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;
  }