时间戳

首页 > 解决方案 > 如何防止变量在导入到 sass 中的另一个部分之前编译？

css - 如何防止变量在导入到 sass 中的另一个部分之前编译？

问题描述

这个问题似乎有点棘手，但就我而言，这是分解我的代码的好方法。

我希望我的代码从 page1.sass、page2.sass 等几个主题中的部分 _global.sass 中被拒绝，并且只是在主题的开头重新定义变量，而不是直接在代码中。这样，我只会在最终的 sass 文件的开头重新影响变量，而不是在每次需要更改时在每个页面上更改代码。

为此，我认为我必须找到一种方法来阻止 _global.sass 编译其变量，以便我可以在 pageX.sass 文件中重新定义它们并最终编译它们。

在部分 _variables.sass 文件中

$bg-color-page1: black
$bg-color-page2: red
$bg-color-page3: blue
$bg-color-page4: yellow
// etc.
$bg-color-page-global: grey /* you're obliged to affect a value when you declare a variable

在部分 _global.sass 文件中

@import variables

body
    background-color: $bg-color-page-global

在最终的 sass 文件中，例如 pageX 或 page1.sass

@import variables
@import global

$bg-color-page-global: $bg-color-page1

body
    background-color: $bg-color-page-global

使用此代码，使用 pageX.cass 文件的每个页面的背景都是灰色的，因为 _global.sass 的代码是在将其导入 pageX.sass 之前编译的。我希望它适应，page1.sass 为黑色背景，page2.sass 为红色等。

您现在是否有一种方法可以防止在将部分导入另一个 sass 文件之前编译变量？

感谢您的宝贵帮助。

标签： cssimportsasspartials

解决方案

使用 sass 默认键并使用@use和@forward，@import已弃用

  1. 创造style/main.scss

@use "modules/yourModule";

  1. style/settings/_settings.scss使用 !default创建颜色变量

$color1: #000 !default;
$color2: #fff !default;

  1. 覆盖默认值style/modules/_yourModule.scss

@use 'sass:map';
@use '../settings/settings';

// overwrite here
$color1: #ccc;

.yourModule {
  color: $color1;
}

希望有帮助。

推荐阅读