javascript - 以编程方式更改 CSS 中多个位置使用的原色

Question

我的单页应用程序的主要颜色是以编程方式在客户端定义的。问题是它在我的代码中的许多地方都使用过。

例如。在加载时，我有(在 SCSS 中):

body {
  background-color: #XXXXXX;
}

.btn-primary {
  background-color: #XXXXXX;
}

.content ul li a {
  color: #XXXXXX;
  border: thin solid #XXXXXX;
  &:hover {
    background-color: #XXXXX;
    color: white;
  }
}

而且我需要在客户端的所有位置将#XXXXXX 替换为#YYYYYY。

我看到的不同选项是:

1。隔离与颜色相关的 CSS，并用类包装

类似于:

body {
  background-color: #XXXXXX;
  .btn-primary {
    background-color: #XXXXXX;
  }

  .content ul li a {
    color: #XXXXXX;
    border-color: #XXXXXX;
    &:hover {
      background-color: #XXXXX;
    }
  }

  &.other-color {
    background-color: #YYYYYY;
    .btn-primary {
      background-color: #YYYYYY;
    }

    .content ul li a {
      color: #YYYYYY;
      border-color: #YYYYYY;
      &:hover {
        background-color: #YYYYYY;
      }
    }
  }
}

+ Pro 它最终会起作用

- 缺点 一点都不干!

2。使用一个肮脏的 JS，它会检查 #XXXXXX 的每一次出现，并在 DOM 中替换为 #YYYYYY。

+ Pro 我觉得很干净

- 缺点 不确定是否可行

3。使用一个肮脏的 JS，它会检查 #XXXXXX 的每次出现，并在 CSS 文件中替换为 #YYYYYY。

+ Pro 应该能胜任

- Con 不确定是否可行。而且感觉这不是正确的方法。

4。将 application.css 多次编译为 application-other-color.css 并相应地使用它。

+ Pro 非常容易实现(与其他解决方案相比)

- 缺点 用户需要加载不同的 Assets ，这对于 SPA 来说不是最佳选择

有没有人遇到过这个问题？有没有比这两个更好的解决方案？如果没有，你会推荐哪一个？我错过了一些优点/缺点吗？

Answer 1

基本上，#1，但我会以不同的方式构建它。如果它们确实是不同的状态/类，最好将它们分开，并按语义命名它们。

这样，如果您决定，例如，.body-content--error 也需要有绿色文本，或者其他什么，您可以轻松地编辑它。现在您只需要设置javascript切换类，很简单。

这实际上是非常枯燥的代码，因为 .body-content 和 .body-content--error 是同一元素的不同状态。事实上，通过下面的代码，您可以将 body 的类设置为 class="body-content body-content--error" 并继承所有的 .body-content CSS，只需将 background-color 更改为 .body-content--error。

$primary-color: #XXXXXX;
$error-color: #YYYYYY;

// Body content
.body-content {
  background-color: $primary-color;
  margin: 10px;
  padding: 10px;
}
.body-content--error {
  background-color: $error-color;
}

//Button (primary)
.btn-primary {
  background-color: $primary-color;
}
.btn-primary--error {
  background-color: $error-color;
}

// Links in the .content list
.content-list-link {
  color: $primary-color;
  border-color: $primary-color;
  &:hover {
    background-color: $primary-color;
  }
}
.content-list-link--error {
  color: $error-color;
  border-color: $error-color;
  &:hover {
    background-color: $error-color;
  }
}