SASS中的主题化:CSS变量

Sass是一个CSS预处理器，也是CSS的扩展。所以不管我们在Sass文件中定义了什么，在浏览器层面上都会转换成CSS。

在做了研究之后，我发现如果任何产品都需要主题化，那么开发者应该选择CSS，而不是Sass。对于Sass，我将在后面讨论它们的一些缺点。

Sass中的主题化工作原理类似于CSS:首先，我们需要在(:root)中定义CSS变量。

:根{

-background: #FFA69E;

-text-color: #0F0F0F;

｝

这里root是一个伪类，它选择文档的根元素。伪类用于定义元素的特殊状态。所以这些变量必须在应用程序的顶层定义。一旦我们定义了这些变量，我们就可以在Sass文件中使用这些CSS变量，或者在var()函数的帮助下使用不同的Sass变量，var()函数用于插入CSS变量的值。例如:

Body {background-color: var(- background);｝

$xyz: var(- text-color);

通过这一点，我们可以在Sass中实现主题化，但Sass有一个缺点:
- Sass有mixin函数，比如点亮(color, x%)和变暗(color, x%)，所以这些mixin不接受CSS变量，这些mixin需要精确的十六进制代码才能工作。
-所以如果你从库中使用bootstrap Sass，那么你需要使整个bootstrap Sass文件可提交，并找到一个替代mixin函数(变亮和变暗)。

一旦我们定义和设置CSS变量，我们可以通过DOM操作改变这些CSS变量的值，例如:

document.documentElement.style。setProperty(' - -blue '， ' #89CFF0 ');

在按钮点击，我正在做DOM操作和改变背景颜色。不管怎样，DOM操作是一个开销很大的过程。如果您的应用程序非常大或非常动态，操作DOM元素所花费的时间会迅速增加，您的应用程序可能会出现性能问题。

除此之外，我们还可以编写自己的mixin函数，并向应用程序添加主题。

以下是该博客的链接:-主题与Sass:一个SCSS教程

但如果应用程序已经很大了，那么编写自己的mixin函数将是相当乏味的工作，因为你需要从每个文件中调用mixin函数。

快乐学习:)