如何自动添加!默认为所有SASS/SCSS变量
要使用SASS/SCSS导入主题,我们有带有全局变量的如何自动添加!默认为所有SASS/SCSS变量,sass,Sass,要使用SASS/SCSS导入主题,我们有带有全局变量的default.SCSS文件(同时还有默认主题),其中一些变量是从基本主题颜色派生的。在defaults.css之前加载的SCSS主题文件(theme.SCSS)中,我们始终覆盖基本主题颜色,还覆盖特定于主题的一些变量。对于省略的变量,我们希望它们将从默认值.scss中获取值,但如果存在$text color=$basic color赋值,则$basic color的值应取自主题,而不是默认值 /*theme.scss*/ $基色:绿色; /
default.SCSS
文件(同时还有默认主题),其中一些变量是从基本主题颜色派生的。在defaults.css
之前加载的SCSS主题文件(theme.SCSS
)中,我们始终覆盖基本主题颜色,还覆盖特定于主题的一些变量。对于省略的变量,我们希望它们将从默认值.scss
中获取值,但如果存在$text color=$basic color
赋值,则$basic color
的值应取自主题,而不是默认值
/*theme.scss*/
$基色:绿色;
/*某些主题中可能会省略某些变量
默认情况下使用主题基础颜色。
在这个主题中,$text颜色应该是绿色的。
$text颜色:青色;
*/
$按钮颜色:黑色;
/*default.scss*/
$基色:蓝色!违约
$text color:$base color!违约
$按钮颜色:$基础颜色!违约
请参见下面的示例
它工作正常,但我不希望附加
!default
到default.scss的每一行,因为有数百行,因此很难读取值。有没有办法通过导入指令或文件顶部的某些选项自动执行此操作?不幸的是,sass中目前不支持同时为多个变量指定变量标志。它们必须添加到每一行,这是当前声明主题默认值的最佳实践
您可以看到这两种方法,并且都是这样做的,因为这两种方法都是基于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
}
然而,我不同意这种说法,因为它会导致访问基本主题变量的代码有些奇怪。使用当前可用的选项,在所有行中添加默认标志可能是最好的选择