Utilizing SASS to retrieve the H, S, L values from a color

Is there a way to extract the H, S, L values from a hex color in SASS and assign them to separate CSS variables?

$colors: ( "primary": $primary, "secondary": $secondary) !default;
:root {
    @each $color, $value in $colors {
        --#{$color}-h: #{$value};
        --#{$color}-s: #{$value};
        --#{$color}-l: #{$value};
      }
}

The current code mentioned above duplicates the color 3 times. Is there a more efficient way to achieve this in SASS?

Answer №1

Sure thing! I managed to accomplish it by utilizing various SASS functions.

@each $shade, $setting in $color-themes {
    --#{$shade}-hue: #{str-slice(quote(hue($setting)), 1, -4)};
    --#{$shade}-saturation: #{saturation($setting)};
    --#{$shade}-lightness: #{lightness($setting)};
  }

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

Is there a way to eliminate the additional and varying pseudo-padding on text inputs in both Webkit and Gecko browsers?

The issue I'm facing is specific to input[type="text"] elements in Webkit. No matter what adjustments I make, it seems like there is an additional padding: 1px 0 0 1px (top and left only) applied to the element. A similar anomaly occurs in Gecko as w ...

The default margin of an HTML element is set to fill the width of its containing div and cannot be overridden

As a budding web developer, I'm encountering a basic issue that has me scratching my head. Any assistance would be highly appreciated: Regardless of the width I specify for elements within a particular div container, both Safari and Chrome seem to au ...

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

Verify image loading using jQuery

<img src="newimage.jpg" alt="thumbnail" /> I am dynamically updating the src attribute of this image. Is there a way to verify if the image has been successfully loaded and take action once it is? Appreciate any guidance on this matter. ...

Convert text to bold when checkbox is selected and alter color upon selecting a radio button

Having just started learning HTML, CSS, and PHP, I find myself in need of assistance. Despite extensive research online, I have hit a dead end and cannot seem to find any productive solutions. Any guidance or suggestions would be greatly appreciated! I am ...

Designing versatile buttons with HTML

When accessing the website on a phone, I have trouble seeing and tapping on these two buttons because they are too far apart. I would like to change it so that once a file is selected, the 'choose file' button will be replaced by the upload butto ...

Suggestions for resolving the issue of my header being truncated on mobile browsers?

I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue becaus ...

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

``What is the best way to adjust the layout of

I've been using the CSS code below to center items on my page: #MainBox { width: 488px; height: 181px; position: absolute; left: 50%; top: 236px; margin-left: -244px; //this being half the width } However, when viewing the pag ...

Creating a div that automatically resizes to fit a specific width, with excess content wrapping to the next row

In our project, we currently have a design with 4 div elements arranged in two rows and two columns. However, the client has requested that we allow for multiple div elements within a container that spans 100% width. The inner divs should adjust to fit si ...

Utilizing border-image property to showcase four dots in each corner of my div container

I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...

Positioning of bottom navigation bars

Is there a way to ensure that the bottom navigation bar remains fixed at the bottom of the screen, regardless of the device's screen size? position: absolute; bottom: 0; width: 100%; While this solution works, it has been observed that when th ...

Page designed for displaying small star ratings in JSP

In the realm of my star.jsp page, the style.css is its trusty companion, faithfully executing its duties. However, a desire has crept into my heart - I yearn for the stars to shrink in size. The Chronicles of My Code star.jsp <!DOCTYPE html> ...

Is it possible to adjust the positioning of this navigation style?

Discover a unique collection of navigation styles by following this link: http://tympanus.net/Development/ArrowNavigationStyles/ Be sure to explore the final style "Fill Path" at the end of the page. I'm interested in adjusting the position of the ...

Displaying a collapsible table directly centered within the table header

I am having trouble centering my table header in the web browser page. When I click the "+" button, the data is displayed beneath the table header, but I want the collapsible table to be centered directly below the header. I have tried making changes in CS ...

Ways to add space around the td element and properly align the content within it

I've recently delved into the realm of web development, and I'm encountering some challenges with HTML alignment. Despite exploring various resources and attempting to utilize align="left"/right/center attributes, I'm still struggling to ach ...

The presence of whitespace is causing disruptions in the text alignment within div elements

I've noticed some unwanted white space on my website when viewing it in Chrome and Internet Explorer. It's interrupting the flow of text and I can't figure out where it's coming from. Can someone help me locate and remove this pesky wh ...

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...