Styling nested components with SASS variables


I have 3 custom components. Let’s call them Button, Row & Modal

Each of these components uses a CSS variable "–min-height"

I want the defaults set for each so that you can change them based on where you use the component in the code.

Button.component.scss

:root{
    --min-height: 50px;
    min-height: var(--min-height);
}

Row.component.scss

:root{
    --min-height: auto;
    min-height: var(--min-height);
}

Modal.component.scss

:root{
    --min-height: 310px;
    min-height: var(--min-height);
}

Now when a Row component appears inside of a Button component, I want the Row to have the same min-height as the Button. So in the Row.scss, I changed it to be:

min-height: var(--min-height, auto);

That works, however now if there’s a Row inside a Modal that’s NOT inside a Button, it takes the Modal’s min-height which is not intended.

My next try was to revert the Row.scss to what it was & make the Button.scss look like this:

--min-height: 50px;
min-height: var(--min-height);
::ng-deep{
    Row {
        --min-height: var(--min-height);
    }
}

But when I look at the Inspect, it says –min-height is not defined. I’m guessing you cannot pass CSS variables via ::ng-deep?

So now I’m kind of stuck. I need the Row to have different CSS based on the CSS Variables of it’s parent Button. Is there something I’m missing or a better way of doing this?

Source: CSS – Stack Overflow

November 23, 2021
Category : News
Tags: angular | css | sass

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.