Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from within the SASS file and incorporating conditional logic using .contains() in CSS.
Is it possible to update SASS variables from JS or JQuery instead?

For instance,
URL1 = ;
URL2 = ;

I want to determine if the page URL contains ".nz", then set the button color to green; otherwise, set it to gray.

I understand that the syntax below is incorrect. Could you please provide the correct syntax and guidelines:

$URL: need to get the page URL;

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

.button{
 background : $bg-color 
}

Answer №1

If you want to customize the styling based on the URL, one way is to add a body class specific to that URL. Here's an example:

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

In your sass file, you can then define different styles for elements within body.nz. Here's how you can do it:

$bg-color: gray;

.button{
    background: $bg-color;
}

body.nz {
    $bg-color: green;

    button {
        background : $bg-color;
    }
}

Answer №2

Incorporate the URL of the current page into a body element attribute called data-url using JavaScript, like this:

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

Your CSS code can then target elements based on this attribute, for example:

.button {
  background : gray;
}

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

Check out a Codepen demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered error: "Node.js and socket.io: Address already in use"

Experimenting with chat using Node.js and socket.io Currently, I am running Ubuntu 12.04 as a user and have a folder "pp" on my desktop. In this folder, I have placed a server file named server.js. Below is the client code: $(document).ready(function() ...

The data from the server is inaccessible to node.js

I am a beginner in nodejs and jquery, trying to retrieve data from a server and use it to update a webpage: Using jquery on the client side: I would like to change the text inside '#info' element with the data fetched from the server. $('# ...

What can be done to stop $.ajax from automatically appending [] to my key names when making requests (aside from using processData: false

When attempting to utilize $.ajax for a POST request with data in the following format: { list: ["fake_id_0"], mapType: "fakeToRealId" } jQuery seems to alter the structure by adding brackets only to the key list, transforming it into: { lis ...

Tips for refreshing the page upon Geolocation request

I am working on a HTML5 project that requests geolocation from the user. Here is an image of what it looks like: My main query is: Is there a way to refresh the page automatically once the user grants permission to share their location? Are there any Jav ...

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

As a beginner in HTML, I decided to incorporate Bootstrap into my project. After downloading the necessary files, including css, js, and fonts, I found myself able to easily add the css and js files using the appropriate tags. However, I encountered some c ...

Can the pointerover event be managed on a container within the am5 library?

While attempting to add an HTML label to a map and trigger a pointerover event, I encountered issues. The objective was to change the HTML content upon hover. Despite trying to incorporate a tooltip, the hover event failed to work properly, and the tooltip ...

Hide a div using jQuery by implementing an if statement and adding a new class

I am trying to find a solution for hiding a div generated by a plugin when disabled=true. I have been researching on SO and came across the idea of using .attr to locate disabled=true and then adding a CSS class with display: none to hide it. Unfortunately ...

The object tag does not function properly for video fallbacks when using the appendChild method

My video player application utilizes a modified version of video For everybody. The setup involves an HTML5 <video> tag encompassing an <object> tag for flash fallback on Internet Explorer. Everything functions smoothly when I employ this setup ...

The word "await" is a special reserved keyword used to call functions within an async

Currently utilizing async-await: Whenever the function run invokes findLateastVersion, even though run function is marked as async, an error message pops up stating await is a reserved word. The findLateastVersion method returns a promise and based on va ...

Exploring the values of a JavaScript promise while iterating through a for loop

I find myself wandering in the land of possibilities and would greatly appreciate some direction. After spending 2-3 hours scouring through countless SO questions and documentation related to my current predicament, I still seem to be missing the mark. Ove ...

Using PHP variables within the writeHTML() function in TCPDF

I'm attempting to include 3 different HTML strings in a PDF using TCPDF I have 3 variables that hold HTML strings. However, the code below only writes the value of $var3 to the PDF. Is there a way to display the values of all 3 variables in the PDF ...

What is the best way to display the elements of an array within an HTML div element?

I've been trying to display the contents of an array in a div container on my HTML file, but I'm stuck. Here's what I currently have: function printArray() { var $container = $('.container'); $container.html(''); ...

Issue with AJAX function not initiating PHP script upon subsequent button clicks

My button has the following function: $(function() { $("#submit").click(function(){ $.ajaxSetup({ cache: false }); $.ajax({ url:'crfile.php', type:'GET', }); }); }; When clicked ...

When the time comes, ReactDOM will render your element into the designated container,

What does the [,callback] parameter represent in the ReactDOM.render(element, container) method? ...

Interacting with RESTful web services using jQuery

I'm working on a web service that provides data in JSON format through a specific URL. My current challenge involves figuring out how to store this data in a variable using jQuery. Here's what I've attempted so far: $.ajax( { type:'G ...

Feed information into a Select element from the Material UI version 1 beta

Having trouble populating data from a < Select > component in Material UI version 1.0.0.0 beta. Snippet of my code: This section is located inside the render() method. <Select value={this.state.DivisionState} onChange={this.handleChang ...

Extracting the contents of a div element from the HTML data retrieved through AJAX

I am no expert in jQuery and Ajax, so I apologize if this question is bothersome. Despite searching online, I haven't been able to find a simple answer. I'm particularly curious about the HTML data that is returned from an Ajax call, which conta ...

What is the best way to pass the value of a selected option to an express server

<label for="exampleFormControlSelect1"> <strong>Please Select the Number of PDFs to Merge:</strong> </label> <select class="form-control" id="exampleFormControlSelect1"> <option name=" ...

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. Something like this: Here is my current code: <template> <v-container class="align-center" fill-height fluid> <v-row class=&q ...