菜鸟教程
教程 css tutorial

模块化结构

大型项目中，合理拆分和组织样式文件非常重要。Sass 提供了模块化机制，支持将样式拆分成多个部分，然后在主文件中导入，便于管理和复用。

1. 分文件编写

一般将样式拆分为：

  • _variables.scss — 存放变量
  • _mixins.scss — 存放混入（Mixin）
  • _base.scss — 基础样式
  • _layout.scss — 布局样式
  • _components.scss — 组件样式

文件名前加下划线 _，表示是部分文件（partial），不会被单独编译。

2. 导入模块

使用 @import（旧方法）

scss 
@import "variables";
@import "mixins";
@import "base";
@import "layout";
@import "components";

使用 @use（推荐）

scss 
@use "variables";
@use "mixins";
@use "base";
@use "layout";
@use "components";

@use 会启用命名空间，避免命名冲突。

模块化结构示例

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

<head>
<meta charset="UTF-8" />
<title>Sass 模块化结构示例</title>
<style>
:root {
–primary-color: #2ecc71;
–font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}


body {
  font-family: var(--font-family);
  background-color: #ecf0f1;
  margin: 40px;
}

header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

main {
  margin-top: 30px;
  background: white;
  padding: 30px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



</style>
</head>


<body>
<header>模块化 Sass 示例</header>
<main>
这是使用 Sass 模块化结构拆分文件后，最终合并编译的样式效果。
</main>
</body>


</html>

相关内容