SCSS模块化

SCSS模块化

随着项目的规模越来越大，单个scss文件中的代码就会越来越多你不必将所有 Sass 都写入单个文件。你可以使用 @use和@forward 规则根据需要将其拆分。方便维护。

@use导入

@use不能部分导入它总是加载整个模块的所有公开成员（变量、函数、混入）和样式，然后通过命名空间统一访问。

格式

@use "base";//引入base.scss文件 这里不需要写.scss  
@use 'base' as variables;//设置命名空间别名 
@use 'base' as *;//可直接使用（变量、函数、混入）

示例：

scss代码

//_base.scss 专门写变量的scss文件
$font-stack:Helvetica,sans-serif;
$primary-color:#333;


//styles.scss 专门写样式的scss文件
body{
    font:100% base.$font-stack;
    color:base.$primary-color;
}
.inverse{
    background-color:base.$primary-color;
    color:white;
}

css代码

body{
    font:100% Helvetica,sans-serif;
    color:#333;
}
.inverse{
    background-color:#333;
    color:white;
}

forward导出

@forward 是导出，负责暴露模块，可以用 show / hide 筛选要公开的成员，如变量、混入、函数。不包括样式。

@forward 'utilities' show $primary-color, px-to-rem;导出变量 $primary-color和函数px-to-rem
@forward 'utilities' hide $primary-color;//导出除变量 $primary-color外的所有变量、混入、函数
@forward 'utilities' ;导出所有变量、混入、函数

例如：

// _utilities.scss
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
$danger-color: #e74c3c !default;
@mixin reset-margin {
  margin: 0;
  padding: 0;
}
@function px-to-rem($px) {
  @return $px / 16px * 1rem;
}

// _index.scss
@forward 'utilities' show $primary-color, px-to-rem;
// 注意：混入 reset-margin 和变量 $secondary-color, $danger-color 没有被转发

// main.scss
@use 'index' as utils;
.element {
  color: utils.$primary-color;          // ✅ 可用
  font-size: utils.px-to-rem(24px);     // ✅ 可用
  // margin: utils.reset-margin();       // ❌ 错误，reset-mixin 未转发
  // background: utils.$secondary-color; // ❌ 错误，$secondary-color 未转发
}