css - 使用 main.scss 和子组件 scss 文件嵌套 scss

Question

我有一个全局 ma​​in.scss 文件，我在其中声明了一个

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

并且在作为login.scss 的子组件文件中，我将另一个类定义为

@import 'main.scss';

.title-content{
    color: red
    }

现在我必须在单个类名中使用相同的属性。

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

哪个包含两个属性？

喜欢.title-content{font-size: 12px;颜色:红色

Answer 1

您需要通过级联的第一个导入工作来扩展您的第二类，这样您就可以这样做:

主 scss

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

登录.scss

@import 'main.scss';

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