以编程方式更改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它最终会起作用

- Con完全不干!

2.使用脏的JS来检查DOM中的每个出现#XXXXXX和替换#YYYYYY.

+ Pro对我来说似乎很干净

- Con不确定它是否可行

3.使用脏的JS来检查CSS文件中的每个出现#XXXXXX和替换#YYYYYY.

+ Pro应该做的工作

- Con不确定它是否可行.并且它感觉不是正确的方法.

4.编译几次application.cssto application-other-color.css并相应地使用它.

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

- Con用户需要加载不同的资产,这不是SPA的最佳选择

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

Answer 1

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

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

这实际上是非常干燥的代码，因为.body-content和.body-content--error是同一元素的不同状态。事实上，使用下面的代码，您可以设置bodyto的类class="body-content body-content--error"并继承所有.body-contentCSS，只需更改background-colorwith即可.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;
  }
}