Question

我正在尝试实现一个想法，我可以单独设置标题标签的底部边框（h1，h2，h3，h4），但也有一个全局覆盖开关。像这样：

$h1-border: 4px solid #CCCCCC;
$h2-border: 4px solid #CCCCCC;
$h3-border: 4px solid #CCCCCC;
$h4-border: 4px solid #CCCCCC;

...但如果我设置了类似的内容：

$all-heading-borders: 4px solid #CCCCCC;

然后它会覆盖/忽略各个设置，并在一次点击中将它们应用到h1-h4标签。

我会用什么？这可能吗？

Answer 1

最简单的解决方案是使用!default标志并将所有变量设置为等于“全局”变量：

// overrides can be done at any point *before* you reference them in your code
$h1-border: 2px dotted orange;

// default configuration variables
$all-heading-borders: 4px solid #CCCCCC !default;

$h1-border: $all-heading-borders !default;
$h2-border: $all-heading-borders !default;
$h3-border: $all-heading-borders !default;
$h4-border: $all-heading-borders !default;

// oh look, another override
$h2-border: 1px solid grey;

h1 {
    border: $h1-border;
    outline: $h3-border;
}

h2 {
    border: $h2-border;
    outline: $h4-border;
}

输出：

h1 {
  border: 2px dotted orange;
  outline: 4px solid #CCCCCC;
}

h2 {
  border: 1px solid grey;
  outline: 4px solid #CCCCCC;
}

SASS有条件的全局覆盖

1 个答案: