Question

我的应用程序由发生的重定向初始化。应用程序URL附加了查询参数，我必须在应用程序加载时检索并使用它们。其中一个参数是十六进制值，必须应用该值才能控制应用程序主色主题。目前我正在使用ActiveRoute queryParams并使用它们来获取参数。

我将名为theme.scss的文件中的颜色应用于我的其他SASS文件，并将其导入到我的主应用程序组件中，该组件将所有这些样式添加到样式标记中的DOM中。

我的风格基本上应用如下：

.sidebar-left-item.active {
  background-color: $pirmary-light;
}

.btn-pirmary-light {
  background-color: $pirmary-light;
}

变量$ primary-light是需要从应用于其的重定向进入的十六进制值的变量。所以它真的可以是任何颜色。

我怎样才能实现这种行为？谢谢你的建议。

更新

这是我想做的。使用Angular 1，我做了一个指令，执行以下操作。我会将它添加到index.html的body标签中，它会处理绑定，最后在样式标记中保留有效的CSS规则。这允许我在运行时应用属性。

HTLM：

<dynamic-styles id="dynamic-styles" class="ng-cloak">

  #ad-container:before {
    background-color: {{ design.bgAlph }};
  }

</dynamic-styles>

Angular Directive：

dynamicStyles = function($interpolate, $timeout) {
  return {
    restrict: 'AE',
    link: function(scope, element) {
      $timeout(function() {
        var domElement = element[0];
        // General interpolation digest cycle will take part after the directive
        // is executed. Separate text interpolation allows not to wait for it,
        // and apply dynamic styles as soon as possible.
        var interpolatedFn = $interpolate(goog.dom.getTextContent(
            domElement));
        goog.dom.setTextContent(domElement, '');
        var styleElement = goog.dom.createElement(goog.dom.TagName.STYLE);
        goog.dom.setTextContent(styleElement, interpolatedFn(scope));
        goog.dom.appendChild(document.head, styleElement);
      });
    }
  };
};

Answer 1

SASS / SCSS被编译成CSS，所以你无法动态改变变量的内容，因为CSS没有变量。

但我现在可以想到的可能解决方案是：

案例1：
准备好您想要编辑的文件。

将这些变量存储为字符串，并使用.replace()来搜索和替换变量/值

输出此字符串，然后开始编译css

案例2：
使用相同的.replace()搜索并直接替换css文件（如果可能的话）！

完成上述步骤之一后，只能启动页面加载！

或者为你的想法提供一些食物

Making Sass talk to JavaScript with JSON

SassyJSON: Talk to the browser!

Sharing Data Between Sass and JavaScript with JSON

应用程序加载

1 个答案: