您可以为scss逻辑使用ruby@model.attribute吗?

kmb7vmvb  于 2021-09-29  发布在  Java
关注(0)|答案(2)|浏览(333)

这是我目前拥有的页脚:

.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 我不相信这是可能的,但我想还有另一种方法。
我在想,在haml文件中,每个模型(@partner)都有多个页脚,我可以根据存在的模型调用页脚。
这样地?

- 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
mmvthczy

mmvthczy1#

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

.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
iqjalb3h

iqjalb3h2#

大不

每个请求动态生成css/js资产并不是一件容易的事情——rails在开发中这样做只是为了方便。
在rails中,资产是在生产环境中的部署时编译的,即使在开发环境中也不支持请求。因此,基于每个请求获取的模型替换scss文件中的值的想法被打破了。
您还应该考虑为所有访问者部署一个单独的CSS文件,并将其推送到CDNS、反向代理和边缘缓存中,并为所有访问者提供相同的资产。
相反,您可以使用元素样式(内联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_来注入内容:


# 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 选项

相关问题