CODEWITHSUNDEEP
csssass
Anupam Maurya
Anupam Maurya

Reputation: 2231

Nesting up scss with main.scss and subcomponent scss files

I have one global main.scss file where i have declared one

.small-size-text{
font-size: 12px;
}

And in subcomponent file as login.scss i have defined one other class as

@import 'main.scss';

.title-content{
    color: red
    }

Now I have to use same property in as single className.

<p className='title-content'> Hello World</p>

Which contains both property?

like .title-content{font-size: 12px; color: red}

Upvotes: 0

Views: 40

Answers (1)

InitialCrow
InitialCrow

Reputation: 333

you need to extend you second class with the first import work ith cascading so you can do this :

main scss 

 .small-size-text{
    font-size: 12px;
    }

login.scss 

@import 'main.scss';

.title-content{
    @extend .small-size-text;
    color: red;
}

Upvotes: 2

Related Questions