【问题标题】:Conditionally load Sass stylesheets with variable overrides有条件地加载带有变量覆盖的 Sass 样式表
【发布时间】:2014-02-07 00:19:18
【问题描述】:

在我们的应用中,我们有不同的诊所,所有的患者页面都嵌套在一个有品牌的诊所下。我们有 100 多家诊所,所以我宁愿在我的 application.html.haml 文件中没有类似 = stylesheet_link_tag #{@clinic.name}_theme 的内容,并有一个类似的主题文件

// clinic_a.css.sass
a
  color: red

// clinic_b.css.sass
a
  color: blue

我宁愿在我的所有 Sass 文件中使用颜色变量,然后在根据诊所调用的单独工作表中定义这些变量(例如,由参数找到)。所以:

// application.css.sass
a
  color: $link_color

h1
  color: $neutral_color

// clinic_a.css.sass
$link_color: #faa
$neutral_color: #ccc

// clinic_b.css.sass
$link_color: #96c7c7
$neutral_color: #bababa

问题是,似乎变量必须首先出现在资产管道中,因此必须在我的 application.css.sass 文件中的其他文件之前声明它们。但显然,该文件无权访问参数或任何内容。

如何根据参数决定要加载哪些变量文件,然后在我的 application.css.sass 文件以及其中包含的文件中评估哪些变量文件?

编辑

需要明确的是,这必须与 Rails 的资产管道一起使用。

【问题讨论】:

  • 您总是可以将其设为 erb 文件,尽管我不认为这是最好的方法。

标签: ruby-on-rails sass asset-pipeline


【解决方案1】:

我不会加载不同的样式表,我会使用 sass 中的 @if 函数来有条件地分配变量:

EXAMPLE
p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

【讨论】:

  • 也许我不明白这一点。样式表如何访问数据库或参数来告诉他们应该显示什么样式?此外,我们有几十个样式表,这将需要每个元素的 100 多个案例的条件逻辑。
猜你喜欢
  • 2013-03-15
  • 1970-01-01
  • 2021-11-20
  • 2018-09-22
  • 2017-05-22
  • 2021-03-31
  • 2013-06-06
  • 2020-02-17
  • 2018-03-31
相关资源
最近更新 更多