菜鸟教程
教程 css tutorial

Sass / SCSS 基础

Sass 是一种 CSS 预处理器，增强了 CSS 的功能性和组织性。SCSS 是 Sass 的一种语法风格，更接近原生 CSS。它们允许使用变量、嵌套规则、混入（mixin）、函数等，使样式代码更简洁、模块化。

1. 安装 Sass

使用命令行安装：

bash 
npm install -g sass

或者在项目中作为开发依赖：

bash 
npm install sass --save-dev

2. 基本语法（SCSS）

SCSS 文件以 .scss 为后缀，语法类似 CSS，支持：

变量

scss 
$primary-color: #3498db;

button {
  background-color: $primary-color;
}

嵌套规则

scss 
nav {
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
  }
}

混入（mixin）

scss 
@mixin rounded {
  border-radius: 8px;
}

.card {
  @include rounded;
}

3. 编译 SCSS

在命令行中运行：

bash 
sass style.scss style.css

也可使用开发工具（如 Vite、Webpack）自动编译。

Sass / SCSS 示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>Sass / SCSS 示例</title>
<style>
:root {
–primary-color: #3498db;
}


.card {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  margin: auto;
  text-align: center;
  font-family: sans-serif;
}

.card ul {
  list-style: none;
  padding: 0;
}

.card li {
  display: inline-block;
  margin: 0 5px;
}



</style>
</head>


<body>
<div class="card">
<h2>使用 Sass 编写的样式</h2>
<ul>
<li>嵌套</li>
<li>变量</li>
<li>Mixin</li>
</ul>
</div>
</body>


</html>

相关内容