如果页面URL包含某些特定文本，如何更改SASS变量属性值？

Question

我要对两个功能不同的网站（颜色除外）使用相同的SASS文件。所以我想根据URL更改颜色。现在我的问题是我无法从SASS文件中获取页面URL，并且不知道如何在CSS中使用.contain（）。
或者这是否可能从JS或JQuery更新SASS变量？

即
URL1 = https://www.myURL.nz.com;
URL2 = https://www.myURL.au.com;

现在，如果页面URL包含“ .nz”，则我想检查的是按钮颜色为绿色，否则按钮颜色为灰色。

我知道以下语法是错误的。因此请提供正确语法和要求的帮助

$URL: need to get the page url;

   @if $URL.contains('.nz') {
      $bg-color: green;
   }@else {
      $bg-color: gray;
   }

.button{
 background : $bg-color 
}

Answer 1

您可以根据您的URL添加一个[...]类吗？所以会是这样

super()

然后在sass文件中，您可以像这样为body的子代分配不同的颜色：

$(function() {
    if ( document.location.href.indexOf('.nz') > -1 ) {
        $('body').addClass('nz');
    }
});

Answer 2

如果浏览器支持，请考虑使用CSS自定义属性/变量：

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Answer 3

您可以通过javascript将last的值打印到body元素的location.href属性中，例如

data-url

您的CSS代码为

<script>
  document.body.dataset.url = location.href;
</script>

  

Codepen demo