SASS/SCSS一篇全通

chuuuing

已于 2022-05-24 13:54:12 修改

阅读量1.3k

点赞数 5

分类专栏：前端 React专栏文章标签： sass scss css

于 2022-05-24 07:45:00 首次发布

版权

本文详细介绍了SASS/SCSS的基础知识，包括SaSS的两种语法、安装方式，以及ScSS的变量、嵌套、模块、@use与@import、扩展/继承、混入等核心语法。通过实例解析，帮助读者掌握SASS/SCSS的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景介绍

SaSS全称syntactically awesome style sheets（中文翻译为“语法上很棒的样式表”），并且自喻为拥有超能力的CSS，听着就特别臭美。SaSS于2007年诞生，是对CSS的功能扩展，想要帮助开发者更轻松地，更高效的写样式表。

⚠️ 浏览器是无法直接理解SaSS的，我们需要一个编译器，把SaSS翻译成CSS。
请添加图片描述

SaSS开发了两种语法：

缩进语法 (Indented Syntax)：用缩进取代了冒号和花括号，文件后缀为*.sass
ScSS语法(Superset Syntax是CSS的超集)，文件后缀为*.scss。是对 CSS语法的扩充。也就是说，所有符合 CSS语法的样式表也都是具有相同语法意义的 SCSS 文件。➡️ 主流

与其他包一眼，我们可以用npm或者brew来安装：

两者达到的效果是一样的，都是本地环境的全局安装（在你电脑所以路径都能使用）。安装之后，我们就可以用sass命令行工具将sass编译成css文件了，比如：
sass index.scss index.css

参见[官方文档]{https://sass-lang.com/install}

本地安装时我们一般使用全局安装（global）。项目中sass更偏向于局部安装。比如在某个react项目中，我会用：
npm install sass
安装成功后我能在我react项目的package.json中看到：

因为scss是css的超集，所以所有css的语法在scss中都是有效的。在此之外，scss还提供了以下功能：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   
  font: 100% $font-stack;
  color: $primary-color;
}

⚠️ 现在的css语法中也有变量了（var(--blue);）

特别适用大型项目。嵌套实现了代码的重用，并且大大提高了准确性。

nav {
   
  ul {
   
    margin: 0;
    padding: 0;
    list-style: none;
    li {
    
    	display: inline-block; 
    }
  }
}

模块使不同的scss文件可以相互引用

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   
  font: 100% $font-stack;
  color: $primary-color;
}

使用关键词@use，我们可以在styles.scss文件中引用_base.scss，比如某个变量base.$primary-color

// styles.scss
@use 'base';

.inverse {
   
  background-color: base.$primary-color