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;
    }