如何自动将 !default 添加到所有 SASS/SCSS 变量答案

【问题标题】：How to automatically add !default to all SASS/SCSS variables如何自动将 !default 添加到所有 SASS/SCSS 变量
【发布时间】：2018-04-27 13:31:00
【问题描述】：

为了使用 SASS/SCSS 实现主题，我们有 default.scss 文件，其中包含全局变量（同时还有默认主题），其中一些变量是从基本主题颜色派生的。在defaults.css 之前加载的 SCSS 主题文件 (theme.scss) 中，我们总是覆盖基本主题颜色并覆盖一些特定于主题的变量。对于省略的变量，我们希望它们会从 defaults.scss 中获取值，但如果有 $text-color = $basic-color 赋值，则应从主题中获取 $basic-color 的值，而不是默认值。

/* theme.scss... */
$base-color: green;
/* Some variables may be omitted in some themes 
   to use theme base-color by default.
   In this theme $text-color is expected to be green.
  $text-color: teal;
*/ 
$button-color: black;

/* default.scss */
$base-color: blue          !default;
$text-color: $base-color   !default;
$button-color: $base-color !default;

在https://jsfiddle.net/ena66ag3/查看这个例子

它工作正常，但我不希望将!default 附加到default.scss 的每一行，因为有数百行，并且很难读取这些值。有没有办法通过 import 指令或文件顶部的一些选项自动实现它？

【问题讨论】：

标签： sass

【解决方案1】：

不幸的是，目前 sass 不支持同时为多个变量指定变量标志。它们必须添加到每一行，这是当前声明主题默认值的最佳实践。

你可以看到bootstrap (v4) 和foundation sites 都是这样做的，因为它们都是基于 Sass 构建的受人尊敬的框架，我建议走这条路。

也没有办法用动态变量名来声明变量，所以在这一点上解决这个问题的唯一方法是进行一些预处理，将默认标志附加到默认文件中的所有变量，但那就是可能是一个更大的问题，因为它会向任何阅读它的人隐藏相当重要的实现细节。

如果您仍然希望在没有默认标志的情况下使用语言支持的默认行为，它将使用映射。

/*
 * In theme.scss
 */
$globals: (
  line-height: 10,             // theme value
  something-special: 'black',  // theme value
);

/* 
 * In defaults.scss
 */
// Ensure there is an empty globals map if no theme is loaded
$globals: () !default; 

// Merge theme defaults over the default values
$globals: map-merge((
  font-size: 1,      // default value
  line-height: 2,    // default value
), $globals);

/**
 * Usage
 */
div {
  font-size: map-get($globals, font-size);              // 1
  line-height: map-get($globals, line-height);          // 10
  border-radius: map-get($globals, something-special);  // black 
}

但是我不会这样做，因为它会导致访问基本主题变量的代码有些奇怪。使用当前可用的选项，为所有行附加一个默认标志可能是您最好的选择。

【讨论】：