Как изменить значение свойств переменной SASS, если URL страницы содержит определенный текст?

Question

Я хочу использовать один и тот же файл SASS для двух разных веб-сайтов, которые имеют одинаковую функциональность, кроме цвета.Поэтому я хочу изменить цвет в зависимости от URL.Теперь моя проблема в том, что я не могу получить URL страницы из файла SASS и не знаю, как использовать .contain () внутри css. или возможно ли обновить переменную SASS из JS или JQuery?

т.е.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

Вы можете добавить класс 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;
    }
}

Answer 2

Рассмотрите возможность использования пользовательских свойств / переменных CSS, если ваш браузер поддерживает это:

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

Answer 3

Вы можете напечатать через javascript значение location.href в атрибут data-url элемента body, например,

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

и ваш код CSS будет

.button {
  background : gray;
}

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

Кодовая демонстрация