css - SASS中有没有办法动态地为文件之间的变量赋值

Question

我在 SASS 中搜索了正确的方法，我不知道是否可行。

例如，我在 laravel 中有一个网站，其中包含 3 个子域。这 3 个子域将具有相同的站点结构，但数据和样式将不同。

在 laravel 中，我有一个像这样的可变子域:{subdomain}.mysite.com所以如果我去 green.mysite.com 它将加载例如 green.css

我想以模块化的方式使用 sass 并且有:

common.scss 具有 undefined variable (如颜色)的所有子域共有的所有样式

green.scss 颜色变量和一些东西在这里定义

紫色主题的 purple.scss 变量

对于 common.scss 中的代码示例，我会有类似的东西:

#main-footer{
     border-top: 4px solid $main;
}

在 green.scss 中:

/* COLORS */
$main: #8cc83d;
$second: #d38345;

这是否可以在 SASS 中以特定方式执行，或者我必须复制粘贴我所有包含 vars 的代码？ :/

Answer 1

创建一个名为 _vars.scss 的 sass 部分，然后在您的 main.scss 中导入它，然后再使用它。

例如:

_vars.scss

$color-main-theme: blue;

_header.scss

html {color: $color-main-theme;}

主.scss

@import "vars"
@import "header"

然后当你的 sass 顺从时，你的 vars 将被正确添加。作为奖励，这使得在元素之间管理和更改代码变得非常容易。

正如@Ennui 所说，您将需要三个单独的 _vars.scss 文件来完成您想要的(包括在这里是为了完整性，以防有人不看评论)。

Basically what agconti says in his answer, but you need 3 separate _vars.css definition files, and three separate main.scss files (one for each site) that each import the _common.scss main styles and the _vars.css file for each respective color scheme. – Ennui 3 mins ago