在 scss 文件中使用 config.rb 中定义的变量

Posted 2023-03-06

【中文标题】在 scss 文件中使用 config.rb 中定义的变量

【英文标题】：Use variable defined in config.rb in scss files

【发布时间】：2013-01-08 12:25:56

【问题描述】：

是否可以在整个 SCSS 文件中使用 compass 项目的 config.rb 文件中定义的变量？

【参考方案1】：

在您的 config.rb 文件中添加一个自定义模块：

module Sass::Script::Functions
  def custom_color(value)
    rgb = options[:custom][:custom_colors][value.to_s].scan(/^#?(..?)(..?)(..?)$/).first.map |a| a.ljust(2, a).to_i(16)
    Sass::Script::Color.new(rgb)
  end
end

然后设置你的变量（同样，在 config.rb 文件中）：

sass_options = :custom =>  :custom_colors => "main" => "#ff1122"  

然后在你的scss文件中，你可以使用custom_color()函数：

body 
  background-color: custom_color(main);

您还可以编写另一个自定义函数，通过传入字符串返回其他类型，例如字体大小、尺寸等，然后返回适当的类实例。

有趣的是，这将允许您将环境变量传递到 compass 命令行，这会产生不同的结果。

所以如果你的 sass_options 是：

sass_options = :custom =>  :custom_colors => "main" => ENV["MAIN_COLOR"]  

然后你运行指南针：

MAIN_COLOR=#dd1122 bundle exec compass compile

然后你在命令行中传入的任何颜色都会出现在生成的 css 中。如果您使用 Heroku，您可以heroku config:set MAIN_COLOR=#224411 并能够使用相同的 scss 文件为每个应用设置模板颜色。

【讨论】：

有趣，与仅在导入的基本 Sass 文件中定义颜色相比，这有什么优势？

您可以将环境变量传入 compass，然后根据不同的调色板生成一组不同的 css 文件？

"sass_options = :custom => :custom_colors => "main" => "#ff1122" " 的含义和目的是什么？