如何基于css类执行不同的sass文件？

提问于 2024-04-29T10:52:58+08:00

浏览次

1

我想知道如何根据某个类包含不同的sass文件（主题）？

现在我们有3个应用程序，它们的样式都有一个独特的css类（.app1 ）

现在我想要包含sass框架并分离每个app标签的所有css / sass . 为了实现这一点，我们定义了一个base.scss . 在这个scss中我们希望达到这个目的：

if .app1然后执行app1.scss else if .app2然后执行app2.scss else如果.app3然后执行app3.scss否则为空

有人有想法吗？

1 回答

0
使用命名空间并将其作为类应用于根元素 . 在适当的名称空间中包装SASS语句 . 您可以将它们分成不同的文件（部分），并在编译时将它们组合在一起 .
```
// in file _app1.scss
.app1 {
    // rules you want applied in the "app1" case
}

// in file _app2.scss
.app2 {
    // rules you want applied in the "app2" case
}

...
```
如果您将文件分成 _app1.scss ， _app2.scss 等，那么 base.scss 将包括：
```
@import 'app1';
@import 'app2';
...
```
这在编译时将部分文件合并为一个 . （您不必将它们分开，但这样做可能更干净 . ）然后，您执行 <body class="app1">... 之类的操作以使用 app1 命名空间，并且只应用 _app1.scss 中的规则 .
回复于 2024-04-29T10:52:58+08:00

相关问题