SCSS基本使用

最新推荐文章于 2025-07-07 15:38:25 发布

原创

最新推荐文章于 2025-07-07 15:38:25 发布 · 693 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端

随着前端技术的不断发展，CSS预处理器如Sass（Syntactically Awesome Stylesheets）变得越来越受欢迎。Sass 是 CSS 预处理器的一个变种，它允许开发者使用变量、嵌套规则、混合（mixin）、函数等功能，使 CSS 编写更加灵活和可维护。Sass 有两种语法：SCSS（Sassy CSS）和 Sass（缩进语法）。本文将重点介绍 SCSS 的基本使用，并附带详细的代码示例。

一、安装与设置

在开始使用 SCSS 之前，我们需要先安装 Sass。Sass 是基于 Ruby 编写的，因此首先需要确保你的系统已经安装了 Ruby。然后，你可以通过 RubyGems（Ruby 的包管理器）来安装 Sass。

在命令行中输入以下命令来安装 Sass：

gem install sass

安装完成后，你可以通过 sass --version 命令来检查 Sass 是否安装成功。

二、SCSS基础语法

1. 变量

SCSS 允许我们定义变量，并在整个样式表中重复使用。变量以 $ 符号开头，后面跟着变量名。

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

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

2. 嵌套规则

SCSS 允许我们嵌套 CSS 规则，使得样式表的结构更加清晰。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
}