Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to

:style="{
            [`--chip-bg-hover`]: hoverColorValue,
            [`--chip-bg-active`]: activeColor,
            [`--chip-border-hover`]: borderHoverColorValue,
        }"

Then, in SCSS,

.chip:hover {
    box-shadow: 0 10px 20px 0 #00000026;
    @extend --chip-bg-actve;
}

The issue is obvious. It's not possible to extend from the --chip-bg-active variable as it is a string and doesn't work correctly. Does anyone know the correct way to dynamically extend a class?

cssvue.jssass

Answer №1

@extend is a way to make selectors share the same declarations, while --chip-bg-active is actually a CSS variable representing a value. It's like trying to use @extend #000 - that doesn't really make sense. If you want to access and use the value of --chip-bg-active, you can do so by using var() in your CSS code:

.chip:hover {
    box-shadow: 0 10px 20px 0 #00000026;
    background-color: var(--chip-bg-active);
}

Answer №2

Perhaps a potential solution could look like this.

.chip:hover {
        box-shadow: 0 10px 20px 0 #00000026;
        $background-color: var(--chip-bg-hover);
        $border-color: var(--chip-border-hover);
        @if $background-color == 'defaultMarker-hover' {
            @extend .bg-defaultMarker-hover;
        } @else if $background-color == 'color1Marker-hover' {
            @extend .bg-color1Marker-hover;
        } @else if $background-color == 'color2Marker-hover' {
            @extend .bg-color2Marker-hover;
        } @else if $background-color == 'color3Marker-hover' {
            @extend .bg-color3Marker-hover;
        } @else if $background-color == 'color5Marker-hover' {
            @extend .bg-color5Marker-hover;
        } @else if $background-color == 'color4Marker-hover' {
            @extend .bg-color4Marker-hover;
        } @else if $background-color == 'color6Marker-hover' {
            @extend .bg-color5Marker-hover;
        } @else if $background-color == 'color7Marker-hover' {
            @extend .bg-color6Marker-hover;
        } @else if $background-color == 'color8Marker-hover' {
            @extend .bg-color7Marker-hover;
        } @else if $background-color == 'color9Marker-hover' {
            @extend .bg-color8Marker-hover;
        }

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 most effective way to extract data from a .dpbox table using selectorgadget in R (rvest)?

Recently, I've been experimenting with web scraping data from different websites using selectorgadget in R. One successful example was when I extracted information from . My usual approach involves utilizing the selectorgadget Chrome extension to choo ...

htmlcssrweb-scrapingrvest

What sets apart compressing test.min.css from compressing test.css?

Recently, I have transitioned to a new job role with a different employer. In my previous workplace, we utilized LESS and compiled it into a .css file before compressing it further into a .min.css file. However, in my current position, we also work with L ...

csslessminify

Simple code in HTML and CSS to assign unique colors to individual characters of the text

What's the best way to assign a unique color to each character in a long text on an HTML page while keeping the file size of the generated HTML as small as possible? The goal is to use minimal color formatting tags. Any suggestions on how to achieve t ...

htmlcsscolors

The Bootstrap carousel's transition effect is not functioning as expected

The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel. Here is the HTML code snippet: <div id="testimonialsSlides" class="carousel carousel-fade" data-ride="fa ...

csstwitter-bootstrapcarouselbootstrap-4

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

javascriptjqueryhtmlcss

What is the best way to change template variables that are set using :set?

Below is the code snippet I am currently working with in vue v3.2.33: <template v-for="route of routes" :key="route.name"> <li :set="open = false"> <div class="collapse" @click="open = ...

vue.jsvuejs3

Disabling Scroll for a HTML Input Tag

My input field has a long value and is set to readonly. Although I have applied overflow-x: hidden; to it, scrolling is still possible on mobile devices. I want to disable this scroll behavior. Can anyone provide a solution? Thank you for your assistance. ...

javascripthtmlcssreactjsnext.js

Can a dynamic title be implemented in a navbar?

On my website, I currently have a title navbar that is displayed on every page (TheNavbar Component). However, I want to dynamically change the title based on the specific page being viewed. For example, within my projects folder there is another folder ...

vue.jsnuxt.js

After reducing the size of the table, the data spills over

Hey there, amazing individuals of the internet! Hope you're all doing well today. I've encountered a rather perplexing issue that's got me stumped. So, here's the situation - I have this table full of data and I want it to initially be ...

javascripthtmljquerycss

Utilizing sprites for high-resolution displays with SASS/Compass

Currently, I am experimenting with the SASS/Compass sprite library and attempting to set up my sprite to accommodate 3 different icon sizes: 1x, 1.5x, and 2x (retina). This is how I have imported the folders: @import "icons10/*.png"; @include all-icons10 ...

sassnpmgruntjscompass-sass

What is the method to alter the fill of a circle using CSS when it is hovered over in JavaFX?

I am seeking assistance for a task involving a circle within an hBox. I would like the color of the circle to change when the mouse cursor hovers over it. Is there a way to accomplish this using JavaFX and CSS? If not, what is the recommended approach fo ...

javacssjavafxjavafx-8

Using jQuery, you can easily modify the color of a TD cell by applying the css properties assigned to the div element

I am attempting to implement a jQuery script that will execute upon the loading of the document. The objective is for the script to retrieve the background color of a div located within a td cell and apply it as the background color for the respective td c ...

javascriptjqueryhtmlcss

Vue.js has encountered a situation where the maximum call stack size has been exceeded

I have implemented a method called cartTotal that calculates the total price of my products along with any discounts applied, and I am trying to obtain the final value by subtracting the discount from the total. cartTotal() { var total = 0; var di ...

javascriptvue.js

CSS photo display with magnification feature

I currently have a functioning inner-zoomable image set up with the code provided. I am interested in converting this setup into an image gallery with zoom capabilities for the selected image element, but I'm unsure where to start. My objective is to ...

javascriptjqueryhtmlcssimage

Activate the JavaScript loader while data is being fetched

I'm currently working on incorporating a loader into my website that should remain visible throughout the entire loading process. For example, if the load time is around 6.8 seconds (with 6.3 seconds of waiting and 0.4 seconds of downloading), I want ...

javascripthtmlcsswordpressloading

ShadCn UI ResizablePanelGroup effortlessly grows within the available area without the need to set a specific height

I'm facing a CSS challenge with the ResizablePanelGroup component. My layout includes a header and a ResizablePanelGroup with 4 panels. The page should take up 100% of the viewport height, and I want other components to be placed within it. Once the H ...

cssnext.jstailwind-cssshadcnui

Validating Names in Vue.js

I need to create a form input field for a person's name. How can I make sure that only alphabets are allowed and numbers are not permitted? <div> <input type="text" class="from-input" placeholder="Enter Your Name..." v-model="name" /> < ...

vue.js

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

Creating a sticky v-stepper-header while scrolling in VuetifyJS

Can anyone help me figure out how to make the <v-stepper-header> component stay sticky when scrolling? I attempted to create custom CSS for this but was unsuccessful. Below is a snippet of code that I tried: <v-stepper v-model="step"&g ...

javascriptvue.jsvuetify.jsv-stepper

What is the best way to have dual backgrounds displayed on a single webpage?

Looking to recreate the background design featured on this website: www.zucoffee.com. Does anyone have any tips? In addition, I'm curious about how to achieve that curved separation effect. I understand it involves two divs, but how did they manage t ...

htmlcssbackgroundbackground-color