utilizing the scss random feature to assign a randomly generated background hue

Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed.

$red: #fc5545;
$pink: #FCCCD1;
$green: #005E61;
$greenLight: #42BA80;
$yellow: #ffcf6f;
$orange: #F57859;
$orangeLight: #FABD91;
$greyLight: #ebebeb;
$greyDark: #2e2e2e;
$blue: #29A8BF;
$blueLight: #B8E3EB;
$blueDark: #142447;

$colors: $pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark;
$colorsText: $blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink;

$key: random( length($colors) );
$nth: nth( $colors, $key );
$nthText: nth( $colorsText, $key );

$random: $nth !default;
$randomText: $nthText !default;

.boxTitle {
    background-color: $random;
    color: $randomText !important;
}

Unfortunately, the color remains the same every time I refresh the page.

Answer №1

Random values are injected by the Sass compiler, but they do not change on page refresh. Once the CSS is compiled, the random values remain static.

Original source: :

It's important to note that the random number generated by random() is determined during the Sass compilation process. This means that in the Editor View, the random value is updated every time the Sass code is modified. However, in Full Page View, the CSS displayed is already compiled and cached, so the random value remains constant without re-compilation on each refresh.

Answer №2

It appears that the issue lies in the conversion of .scss files to .css files.

One potential solution could be to utilize JavaScript in this scenario. Here is an example, which includes jQuery code but can be easily converted to vanilla JavaScript:

$(document).ready(function() {
        $('.boxTitle').css(
  'background-color','#'+ ('000000' + Math.floor(Math.random()*16777215).toString(16)).slice(-6),
);
});

Answer №3

In my opinion, it is important to remember to use brackets when creating a list:

$colors: ($pink, $green, $greenLight, $yellow, $orange, $orangeLight, $blue, $blueLight, $blueDark);
$colorsText: ($blueDark, $orangeLight, $blueLight, $red, $blueLight, $red, $blueLight, $blue, $pink); 

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

What is the best way to align a button with a title on the right side of a page?

Is it possible to align my button to the top right, at the same height as the title in my design? Here is an example: view image here This is what I have achieved so far: view image here I suspect there may be an issue with my divs. The button doesn&a ...

What is the best way to include a final tag on its own line?

I'm trying to add a new line for "Payment Remaining", but it doesn't go to the next line as expected. I need the final text to be on a separate line, Payment Remaining #authorization-wizard-start-work .btn-group label.active { color: #009 ...

Prevent Material UI Chips from altering color upon activation

Chip number 3 in the image below appears with a slightly darker background color when clicked, but this change is unnecessary as only the delete button has functionality. Therefore, the change in color serves no purpose. How do I prevent the background co ...

What is the best approach to utilizing BeautifulSoup to locate all the links on a page containing the string "/pl/oferta/"?

Currently, I am delving into Python with a focus on web scraping. Specifically, I am utilizing BeautifulSoup to extract only the links from: while searching for the string "/pl/oferta/'". import logging import requests from bs4 import BeautifulSoup ...

Adaptable background images with CSS styling

I'm attempting to adjust the sizing of my background image on the splash page to make it smaller. My goal is for the image to fill the entire section regardless of screen size. .splash{ background-image: url("../images/lanternboys_medium.jpg"); backg ...

The fixed width setting for the alpha table column is not being recognized

Despite my efforts, the responsive bootstrap 4 table is not adhering to my fixed column width styles. <table class="table table-responsive table-sm table-striped table-hover"> <thead> <tr> <th> <input typ ...

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

Using Jquery to bind events for selecting focus in and out

There seems to be an issue with binding jQuery events to a select element. The desired behavior is for the .focus class to be added when the select is clicked. However, the logic breaks when an option is selected from the dropdown. See it in action here: ...

Struggling with a clash of styles between the float property and the navigation style in HTML

When I apply the float:left style to my <ul>, why does the nav bar appear very large? Consider this example: <ul class="nav" id="ModuleContainer" runat="server" style="float:left"> <li>111111----------------------</li> < ...

Engaging JavaScript Navigation

I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

Add a class if the particular class is missing from the webpage

Seeking a solution in JS, I am facing a challenge in creating a series of elements with active states, each opening a caption below when clicked. Utilizing .addClass, .removeClass, and .toggleClass in combination, only one element can be active at a time. ...

Stop webpage loading with -webkit-transform

I recently encountered a frustrating issue with the Background Image display problem on iPad. I received advice to add -webkit-transform: translateZ(0); to the id, which initially fixed the problem but then led to a new issue. While it resolved the backgro ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

React-select is failing to align properly with flexbox styling

I'm currently working on customizing my navbar to display both react-selects in a single row. I initially had everything running smoothly with the traditional vanilla select, but integrating the react-select caused my styling to break. Navbar.js impo ...

The placeholder text is not displaying with bullets in Internet Explorer. However, it is functioning correctly in Chrome

I need assistance displaying the placeholder text in IE8 as shown below: "Any relevant reference numbers, such as Direct Debits: - Name of the Branch (if applicable) - What was the original problem - Date the problem occurred " While it appears correct ...

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

Enhance Your YouTube Comment Section with CSS Styling

I am brand new to css html and I'm attempting to create a comment display system similar to that of YouTube using only CSS. My goal is to have an image of the commenter displayed, followed by their username and comment text listed beside it. So far, I ...