css - SASS 多级变量优先级/继承

Question

我使用 Laravel Mix 和 Webpack 进行 SASS 预处理。

我的网站中有两个“主题”，我希望它们能够精简，在需要的地方继承变量。例如，我的主要主题将按以下顺序包括:

// Primary theme
@import "./primary-variables.scss";
@import "/path/to/default/theme/main.scss";

我的默认主题如下所示:

// Default theme
@import "./default-variables.scss";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap";

类似于this question ，我首先包含了主要变量，然后是默认主题变量，最后是 Bootstrap 。

在我的默认主题中，我将 !default 添加到所有变量中，以便在重新定义 Bootstrap 时优先使用它们，而在新定义时它们将成为默认值。主主题根本不使用 !default。

工作示例

如果 Bootstrap 将 $brand-danger 定义为 red !default，我的默认主题会将其重新定义为 blue!default 和我的主要主题将其重新定义为黄色，我的渲染输出将是黄色 - 太棒了!

问题

当我需要引用仅在我的主要主题的其他级别定义的变量时。例如:

// Primary theme:
// This fails since I haven't defined $brand-primary in my primary theme
$my-primary-theme-variable: $brand-primary;

构建现在失败，并显示错误:primary-theme/src/scss/main.scss does not export content。

解决方法

我可以通过将整个 Bootstrap 变量文件复制到我的主要主题并根据需要更改变量来解决此问题，但我真的不想这样做。

问题

SASS变量处理器实际上是如何工作的？我是否可以只更改主题中的 Bootstrap 变量之一，而不必重新定义整个文件？

---

This question非常相似。

Answer 1

您似乎正在使用 @include 导入您的 SCSS，请尝试使用 @import 代替 – 如果这只是问题中的拼写错误，请告诉我:- )

@import "./primary-variables.scss",
        "/path/to/default/theme/main.scss"
;

我在 the question 上添加了一些快速注释你指的是。关于 !default 标志需要了解的重要一点是，它在选择器中使用时生效，并且不会重新定义变量。

Sass 在处理变量时不会向前看 - 它会打印出当前值。在此示例中，.class-1 将呈红色，因为在选择器中使用后重新定义，而 .class-2 将呈蓝色，因为没有默认标志。

$brand-color: red !default; // defined
.class-1 { background-color: $brand-color; }  // red

$brand-color: blue;         // re-defined
.class-2 { background-color: $brand-color; }  // blue

默认标志将导致 Sass 跳过变量重新定义。在此示例中，结果将是首先定义的红色。由于默认标志，以下两个重新定义将被忽略。

$brand-color: red !default;   // defined
$brand-color: blue !default;  // ignored 
$brand-color: green !default; // ignored
.class-1 { background-color: $brand-color; }  // red

在这种情况下，将使用配置中的所有变量 - 如果配置中未定义，则来自partial-1的变量，最后一个partial-2将定义其他两个中未定义的任何变量。

@import '_config.scss';    // definition
@import '_partial-1.scss'; // contains defaults
@import '_partial-2.scss'; // contains defaults

希望这是有道理的:-)

---

导入结构

//  _default-theme.scss
@import '_default-variables.scss', '_bootstrap.scss';

//  _primary-theme.scss
//  primary variables will override defaults or use defaults if not defined
@import '_primary-variables.scss', '_default-theme.scss';

// style.scss
@import '_primary-theme.scss'; // or '_default-theme.scss'

范围

如果您的默认主题和主要主题具有每个主题独有的内容，您可以创建一个范围混合来处理编译的内容。

这是一个非常初级的版本:

//  _scope.scss
$scope-context: null !default;
@function scope($scopes: null, $true: true, $false: false) { 
  @each $scope in $scope-context {  
    @if index($scopes, $scope) { @return $true }  
  }  
  @return $false;  
} 
@mixin scope($scopes: null) { 
  @if scope($scopes) or length($scopes) == 0 and not $scope-context { 
    @content; 
  } 
}

工作原理

范围混合采用上下文参数和内容 block @content。如果传递的上下文与全局变量($scope-context)匹配，则渲染内容 block 。

//  _default-theme.scss
.class { content: 'Will show in both themes'; }

@include scope(default-theme){
  .class { content: 'Will only show in the default theme'; }
}

@include scope(primary-theme){
  .class { content: 'Will only show in the primary theme'; }
}

//  can also be used as "if" function
.class {
  content: scope(default-theme, 'Is default', 'Not default')
}

在您的情况下，在默认变量和主变量中定义 $scope-context

// _default-variables.scss
$scope-context: default-theme !default;

// _primary-variables.scss
$scope-context: primary-theme;

...并将 _scope.scss 添加到 _default-theme.scss

//  _default-theme.scss
@import '_default-variables.scss', '_bootstrap.scss', '_scope.scss';