scss: creating variables dynamically using arrays

I am working on a dynamic way to generate different classes based on colors

        $colors:
            "dark" #3E3E3E,
            "darker" #3E3E3E,
            "light" #ECECF0,
            "green" #00A87B,
            "yellow" #FFBB3B,
            "red" #FF4633,
            "white" #FFFFFF,
            "black" #000000,
            "blue" #436FB6
        ;


        @each $color in $colors{
            // .btn-color
            .btn-#{nth($color, 1)}{
                background: nth($color, 2);
                color: #fff;
            }
            // .color / color
            .#{nth($color, 1)}, #{nth($color, 1)}{
                color: nth($color, 2) !important;
                a{
                    color: nth($color, 2);
                }
            }
            // .color-bg
            .#{nth($color, 1)}-bg {
                background: nth($color, 2);
            }
        }

I want to take this a step further by creating variables for each color from the $colors list. For example, I would like to use $dark to access the value of dark from $colors

Answer №1

If you're considering automating color variations, I suggest exploring the built-in color functions offered by Sass (http://sass-lang.com/documentation/Sass/Script/Functions.html).

Check out this example utilizing a color map (which I find simpler to use compared to a list):
https://i.sstatic.net/t2dtd.png

$colors:(
  green  : #00A87B,
  yellow : #FFBB3B,
  red    : #FF4633,
  blue   : #436FB6,    
  white  : #FFFFFF,
  black  : #000000
);

@each $name, $color in $colors {
  .color {
    &-#{$name}{ 
      background-color: $color; 
      //  create variations (if not black or white)
      @if $color != white and $color != black {
        &.extra-light { background-color: mix($color, white, 25%); }
        &.light       { background-color: mix($color, white, 50%); }
        &.semi-light  { background-color: mix($color, white, 75%); }
        &.extra-dark  { background-color: mix($color, black, 25%); }
        &.dark        { background-color: mix($color, black, 50%); }
        &.semi-dark   { background-color: mix($color, black, 75%); }            
      } 
    }
  }
}

CSS output

.color-green { background-color: #00A87B;}
.color-green.extra-light { background-color: #bfe9de;}
.color-green.light { background-color: #80d4bd;}
.color-green.semi-light { background-color: #40be9c;}
.color-green.extra-dark { background-color: #002a1f;}
.color-green.dark { background-color: #00543e;}
.color-green.semi-dark { background-color: #007e5c;}

.color-yellow { background-color: #FFBB3B;}
.color-yellow.extra-light { background-color: #ffeece;}
.color-yellow.light { background-color: #ffdd9d;}
.color-yellow.semi-light { background-color: #ffcc6c;}
.color-yellow.extra-dark { background-color: #402f0f;}
.color-yellow.dark { background-color: #805e1e;}
.color-yellow.semi-dark { background-color: #bf8c2c;}

.color-red { background-color: #FF4633;}
.color-red.extra-light { background-color: #ffd1cc;}
.color-red.light { background-color: #ffa399;}
.color-red.semi-light { background-color: #ff7466;}
.color-red.extra-dark { background-color: #40120d;}
.color-red.dark { background-color: #80231a;}
.color-red.semi-dark { background-color: #bf35226;}

.color-blue { background-color: #436FB6;}
.color-blue.extra-light { background-color: #d0dbed;}
.color-blue.light { background-color: #a1b7db;}
.color-blue.semi-light { background-color: #7293c8;}
.color-blue.extra-dark { background-color: #111c2e;}
.color-blue.dark { background-color: #22385b;}
.color-blue.semi-dark { background-color: #325389;}

.color-white { background-color: #FFFFFF;}

.color-black { background-color: #000000;}

Function-oriented approach:

$colors:(
  green  : #00A87B,
  yellow : #FFBB3B,
  red    : #FF4633,
  blue   : #436FB6,    
  white  : #FFFFFF,
  black  : #000000
);

@function get-color($color, $variant: null){
  $color: map-get($colors, $color);
  @return map-get((
    extra-light: mix($color, white, 25%), 
    light:       mix($color, white, 50%), 
    semi-light:  mix($color, white, 75%), 
    semi-dark:   mix($color, black, 75%),        
    dark:        mix($color, black, 50%),         
    extra-dark:  mix($color, black, 25%)
  ),$variant) or $color;
}

.class { color: get-color(green); }
.class { color: get-color(green, semi-light); }
.class { color: get-color(yellow, dark); }

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

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

Having difficulty adjusting the text to match the image alignment

Having trouble aligning the text tag inside the H1 above the image. It keeps appearing in the wrong place, either on the left or right. I've tried including the h1 inside the container, but it just disappears. <!doctype html> <html> <h ...

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

The frosting glass effect blur filter is malfunctioning, resulting in no blurring effect and affecting the content

I need help achieving a background photo with a div in front, featuring a blurry dark background with white text. Currently, the setup shows a dark background without blur and dark text. Can someone please assist me? #section0 { background-color: light ...

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

Customizing PrimeReact Styles

I've been on a quest to find the perfect solution for customizing the default 'Nova' theme used in Prime React. While I know there is a theme designer available for purchase, I'd prefer not to go that route. In the past, I found myself ...

Create a dynamic webpage where two div elements glide in opposite directions

My apologies for this seemingly basic question, but I am wondering if anyone knows how to create an animation where a div moves up and down while scrolling, similar to the effect on this website: On that site, near the footer, there are 2 sections with 2 ...

The sticky navbar remains fixed only within the initial section of the page

Currently, I am working on a Bootstrap website that is supposed to be a one-page site with a navigation bar at the top. However, I am facing an issue where the navbar is sticky only for the first section and then disappears as I scroll down. How can I make ...

Image showcasing the background

I'm facing an issue with adding a background image to my project Even after trying to add it globally, the background image is not showing up on the Next.js index page. import { Inter } from 'next/font/google' const inter = Inter({ subsets: ...

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...

Unable to change background-image as intended

Here is an example of my HTML code with an initial background image: <div id="ffff" style="width: 200px; height: 200px; background-image: url('/uploads/backroundDefault.jpg')">sddsadsdsa<br>dffdsdfs</div> Everything seems to b ...

Adjust the position if the height exceeds 100 pixels

Can someone help with this code issue? $(document).ready(function () { if ($('.pi-img').height() > 100) { $(this).css('top' , '30%'); console.log('yeah'); } }); I am encountering difficu ...

The twelfth child in the sequence is not functioning properly, although the others are working correctly

In my list, I have 12 elements and each element contains a div. My goal is to set different sizes for each div by using nth-child on the li element. However, the configuration for the 12th element does not seem to work correctly compared to the rest of the ...

Ways to eliminate excessive spacing between grid blocks

Hey, I'm having an issue with displaying ads in a thumbnail format; there seems to be too much space between them. Take a look: I've been utilizing Bootstrap thumbnails to showcase products. echo '<div class="col-sm-6 co ...

Is your React application struggling to display large images when bundled with Webpack?

I am facing an issue while trying to display an image from my image folder in a React project using Webpack. I have observed that smaller photos with physically smaller dimensions and file sizes load properly, but larger photos do not render on the screen, ...

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

I am currently in the process of customizing the FlexNav Plugin. I have made a modification to allow sub-menus to open on click instead of hover. However, a new issue has arisen where it requires two clicks to open a submenu. Upon investigation, I have i ...

What are some recommendations for a great place to study CSS?

Can anyone recommend a great resource for mastering CSS? I'm looking to go beyond the basics of how rules are matched and understand how to integrate various skills to create more complex projects. While the W3School tutorials are helpful for understa ...

Achieve a full-width span for a single item in a CSS grid without any alterations to the HTML code

How can I make the first item in this grid span 100% without changing the HTML structure? The first item is assigned an extra class ".sub" Is it possible to achieve this? Click here for more information <div class="fd-col fd-5col"> <div class= ...

What is the best way to compare the position-x of two components that are aligned on the same line?

Check out this code snippet: <input id="homebutton" type="image" style="display:inline" src="home.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html&apos ...