如何更改_variable.scss中变量的值

How to change the value of a varible in _variable.scss?

本文关键字：变量 scss 何更改 variable      更新时间：2023-09-26

我有一个有多种颜色的网站。我在_variable.scss$theme_color:red中定义了一个变量；

如何将该变量的值更改为$theme_color:blue；在_variable.scss中？而我把蓝色添加到

有什么可能的办法吗？

在根文件main.scss中使用：

@import '_variable.scss'; // import variables file
$theme_color:blue; // new color

您需要使用!default关键字。

带!default

/* @file _variable.scss */
$theme_color: red !default;
$theme_shadow: 1px 1px 2px $theme_color !default;
/* @file styles.scss */
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}
/* @file corporate.scss */
// I override the color BEFORE the loading of my variables declaration.
$theme_color: blue;
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}    
// Specific rule
.corporate-thing {
  box-shadow: $theme_shadow;
}

CSS输出

/* @file styles.scss */
.foo {
  color: red;
  box-shadow: 1px 1px 2px red;
}
/* @file corporate.scss */
.foo {
  color: blue;
  box-shadow: 1px 1px 2px blue;
}
.corporate-thing {
  box-shadow: 1px 1px 2px blue;
}

无!default

如果不使用!default，则每次调用_variable.scss:时都会覆盖变量

/* @file _variable.scss */
$theme_color: red;
$theme_shadow: 1px 1px 2px $theme_color;
/* @file styles.scss */
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}
/* @file corporate.scss */
$theme_color: blue;
// Now, $theme_color will be overwritten with the `red` value
// because of the absence of the `!default` keyword.
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}    
// Specific rule
.corporate-thing {
  box-shadow: $theme_shadow;
}

CSS输出

/* @file styles.scss */
.foo {
  color: red;
  box-shadow: 1px 1px 2px red;
}
/* @file corporate.scss */
.foo {
  color: red;
  box-shadow: 1px 1px 2px red;
}    
.corporate-thing {
  box-shadow: 1px 1px 2px red;
}

最终错误情况：加载_variable.scss后更改颜色

/* @file _variable.scss */
$theme_color: red;
$theme_shadow: 1px 1px 2px $theme_color;
/* @file styles.scss */
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}
/* @file corporate.scss */
@import 'variable';
$theme_color: blue; // AFTER
.foo {
  color: $theme_color;
  // In this case, $theme_shadow is not overwritten with the new value
  // of $theme_color and keeps it value to 'red'.
  box-shadow: $theme_shadow;
}    
// Specific rule
.corporate-thing {
  box-shadow: $theme_shadow;
}

CSS输出

/* @file styles.scss */
.foo {
  color: red;
  box-shadow: 1px 1px 2px red;
}
/* @file corporate.scss */
.foo {
  color: blue; // OK: blue
  box-shadow: 1px 1px 2px red; // KO: red
}    
.corporate-thing {
  box-shadow: 1px 1px 2px red; // KO: red
}

奖金

实际上，您可以直接从corporate.scss:导入styles.scss

/* @file _variable.scss */
$theme_color: red !default;
$theme_shadow: 1px 1px 2px $theme_color !default;
/* @file styles.scss */
@import 'variable';
.foo {
  color: $theme_color;
  box-shadow: $theme_shadow;
}
/* @file corporate.scss */
// I override the color BEFORE the loading of my main stylesheet
$theme_color: blue;
// Now I have to generate the same code that `style.css`, so the
// easiest way to do it is to directly import it.
@import 'styles';
// Specific rule
.corporate-thing {
  box-shadow: $theme_shadow;
}
相关文章：