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

【问题标题】：How to change SASS variable properties value if page URL contains some particular text?如果页面 URL 包含某些特定文本，如何更改 SASS 变量属性值？
【发布时间】：2019-09-13 16:06:54
【问题描述】：

我想为两个不同的网站使用相同的 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 
}

【问题讨论】：

你不能简单地为每个网站主体添加一个类，例如主题名称吗？例如：<body class="site-1 theme-blue"> / <body class="site-2 theme-orange">
@Jake，不，不可能。因为从技术上讲，只有一个网站有两个不同的 url 。事情是澳大利亚人希望看到灰色的相同按钮，而其他人希望看到绿色的按钮。网站已经开发好了，所以更新 HTML 类会很复杂。

标签： javascript jquery html css sass

【解决方案1】：

你可以根据你的 URL 添加一个body 类吗？所以会是这样的

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

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

$bg-color: gray;

.button{
    background: $bg-color;
}

body.nz {
    $bg-color: green;

    button {
        background : $bg-color;
    }
}

【讨论】：

这是个好主意，但是网站已经开发好了，这样做会破坏风格。
@Avinashnayak 不过，在您达到这一点之前，应该已经研究并整合到您的网站中
但您知道客户可以随时提出任何问题。 :)
当然，我明白你的意思@Avinashnayak，虽然我不明白为什么仅使用 jquery 添加 body 类和 body.nz { $bg-color: green !important; } 从我上面的答案中添加但离开其余的 CSS 原样。？你能测试一下吗？
是的！我明白你的意思了......要实施这个。谢谢:)

【解决方案2】：

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

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

【讨论】：

大部分浏览器不支持 VAR()
截至今日 91% 的全球支持：caniuse.com/#feat=css-variables
IE 是这里的凶手。客户团队总是从这个浏览器开始:(

【解决方案3】：

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

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

你的css代码是

.button {
  background : gray;
}

[data-url*=".nz"] .button{
  background : green
}

Codepen demo

【讨论】：