Question

为了使用SASS / SCSS来构建主题，我们有default.scss个带有全局变量的文件（以及同时的默认主题），其中一些变量是从基本主题颜色派生的。在theme.scss之前加载的SCSS主题文件（defaults.css）中，我们总是覆盖基本主题颜色，并覆盖特定于主题的一些变量。对于省略的变量，我们希望他们从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指令或文件顶部的某些optiopns中自动生成它？

Answer 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 
}

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

如何自动添加！默认为所有SASS / SCSS变量

1 个答案: