当文件名未知时，在文件之间共享 SASS vars答案

【问题标题】：Sharing SASS vars between files, when file name is unknown当文件名未知时，在文件之间共享 SASS vars
【发布时间】：2015-10-05 20:38:43
【问题描述】：

这是我的样式表声明代码：

<link rel="stylesheet" href="username-theme.css">
<link rel="stylesheet" href="layout.css">

“username-theme.css”文件名不同，即 john123-theme.css 或 jenifer-theme.css

我正在尝试解决以下问题：

在我的 layout.scss 中，我想使用以下代码：

body{color:$theme-color}

$theme-color 来自john123-theme.scss

【问题讨论】：

标签： css sass

【解决方案1】：

看看documentation。

这样你就可以有一个像 _variables.scss 这样的文件，其中定义了你的变量，然后在你的 layout.scss 中你会像这样包含它

@import 'variables';

所以所有变量都将在那里可用。

【讨论】：

我没有_variables.scss，因为我同时维护多个主题，服务器代码会将username-theme.scss替换为即artur-theme.scss。我实际上同时有 10 个主题，但只包括相关的一个。
我没有看到在您需要的文件中创建它并与导入共享的问题。也许我在这里遗漏了一些东西。
如果我有一个包含一些值的 _variables.scss 文件，然后是另一个 scss，即覆盖 _variables.scss 值的 _user-theme.scss，用户主题会覆盖 _variables.scss 吗？我不能使用“@import user-theme”，因为我没有在服务器端渲染 scss 文件，而且我不知道登录的用户是什么。
@thanks yuyokk - 我想要完成的似乎是一个糟糕的模式

【解决方案2】：

您可以尝试以其他方式导入，并在用户样式表的末尾导入 layout.scss。只要在导入之前定义了变量，它的值就会在 layout.scss 内容中使用。然后您只需将用户 css 文件链接到页面，因为它现在包含您在 layout.scss 中的所有内容。例如：

_layout.scss

body{color:$theme-color}

用户名-theme.scss

//define variable
$theme-color: #fff;

//import 
@import "layout";

【讨论】：