时间戳

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

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

问题描述

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

标签： javascriptjqueryhtmlcsssass

解决方案

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

$(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;
    }
}

推荐阅读