您可以将 ruby​​ @model.attribute 用于 scss 逻辑吗？

Question

这是我目前拥有的页脚：

.footer.parfoot {
  background: asset_url('footer_flower.png'), #243966;
  background-position: 90% 100%;
  background-size: 140px;
  background-repeat: no-repeat;
}

我想根据模型的不同将asset_url 换成图片。例如：asset_url (@partner.logo), #243966

我不相信这是可能的，但我认为还有另一种方法。

我在考虑为每个模型设置多个页脚（@partner）在 HAML 文件中，我可以根据存在的模型来调用页脚。

像这样？

- if @partner.present?
              =link_to url_with_protocol( @partner.website ) do
                = image_tag 'tulip-logo-white.webp', class: "logo ob-inline-block parlogo fotlog" rescue nil


%footer.footer.parfoot


else footer.footer.defaultfoot 

Answer 1

只需为每个合作伙伴定义不同的 css 类和 1 个默认值：

.footer {
  background-position: 90% 100%;
  background-repeat: no-repeat;
  background-size: 140px;
}

.footer--default {
  background: asset_url('footer_default.png'), #243966;
}

.footer--flower {
  background: asset_url('footer_flower.png'), #243966;
}

.footer--gift {
  background: asset_url('footer_gift.png'), #243966;
}

更改 HAML：

- if @partner.present?
  = link_to url_with_protocol(@partner.website) do
    = image_tag 'tulip-logo-white.webp', class: "logo ob-inline-block parlogo fotlog" rescue nil


%footer.footer{ class: "#{footer_class(@partner)}"}

并将代码添加到application_helper.rb：

def footer_class(partner)
  return 'footer--default' if partner.blank?

  case partner.logo
  when 'flower'
    'footer--flower'
  when 'gift'
    'footer--gift'
  else
    'footer--default'
  end
end

Answer 2

大不了

每个请求动态生成 CSS/JS 资产并不是一件事 - Rails 在开发中这样做只是为了方便。

在 Rails 中，资产是在生产中部署时编译的，即使在开发中也不知道请求。因此，基于每个请求获取的模型替换 SCSS 文件中的值的整个想法被打破了。

您还应该考虑为所有访问者部署一个 CSS 文件并将其推送到 CDN、反向代理和边缘缓存以提高性能，并向所有访问者提供相同的资产。

您可以使用元素样式（内联 CSS）来设置背景图片：

module PartnersHelper
  def partner_footer(partner)
    if partner 
      "background-image: url('#{image_path(@partner.logo)}')"
    else
      "background-image: url('#{image_path('footer_flower.png')}')"
    end
  end
end

%footer.footer.parfoot {
  style: partner_footer(@partner)
}

我知道您可能会说“但内联 CSS 是邪恶的！” - 不总是。当您将独特的样式应用于特定元素时，它非常好。

另外，不要将您的 Haml 文件变成一个巨大的 if/else 树，而是使用content_for 来注入内容：

# app/views/layouts/application.html.haml
= content_for :footer 
  %h3 This is the default content

# app/views/partners/show.html.haml
= content_for :footer 
  = link_to url_with_protocol( @partner.website ) do
    # NEVER use rescue nil!
    = image_tag 'tulip-logo-white.webp', 
                class: "logo ob-inline-block parlogo fotlog"

默认情况下它会连接，但您可以使用 flush: true 选项替换内容。