CODEWITHSUNDEEP
javascriptjqueryhtmlcsssass
Avinash
Avinash

Reputation: 1118

How to change SASS variable properties value if page URL contains some particular text?

I want to use the same SASS file for two different websites which are the same in functionality except color. So I want to change the color based on URL. Now my problem is that I am not able to get page URL from SASS file and don't know how to use .contain() inside css.
or is this possible to update SASS variable from JS or JQuery ?

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

Now I want to chk if page url contains ".nz" then button color is green else button color is Gray.

I know bellow syntax is wrong . so pls help with correct syntax and requirement 

$URL: need to get the page url;

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

.button{
 background : $bg-color 
}

Upvotes: 0

Views: 1590

Answers (3)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could print via javascript the value of location.href into a data-url attribute of the body element, e.g.

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

and your css code would be

.button {
  background : gray;
}

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

Codepen demo

Upvotes: 1

anthumchris
anthumchris

Reputation: 9090

Consider using CSS custom properties / variables if your browser supports it:

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

Upvotes: 0

coops
coops

Reputation: 1714

You could add a body class according to your URL? So it would be something like this 

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

And then in your sass file you can just assign the different colours to the children of body.nz like this: 

$bg-color: gray;

.button{
    background: $bg-color;
}

body.nz {
    $bg-color: green;

    button {
        background : $bg-color;
    }
}

Upvotes: 1

Related Questions