css - 在 ruby​​ on rails 中将元素类拆分为两个类 html.slim

Question

新手在这里: 我有我想单独设置样式的身份验证方法图标，但是它们属于同一类，我不明白如何重写它以对 fb 和 google 使用两个不同的图标。

HTML SLIM 代码:

- if devise_mapping.omniauthable?
  .row
    .col-sm-12
      p.text-center.small-link= t('html.text.or_oauth_login')
      .col-sm-12.d-flex.justify-content-center.oauth-box
        - resource_class.omniauth_providers.each do |provider|
          a.tooltiptext.left[style="position:absolute; left: -10px; top: 43px; color: #FFFFFF;"]= t('html.links.tooltiptext')
          = link_to image_tag("#{provider}_logo.png", size: "40x40"), omniauth_authorize_path(resource_name, provider), class: "oauth-icon"

所以唯一的类是“oauth-icon”。我假设它需要来自 devise.rb 的#{provider}

config.omniauth :facebook, "xxxxxxxx", 
config.omniauth :google_oauth2, "xxxxxxxxxxx", "xxxxxxxxxx" {}

有两个类应该怎么改写？

Answer 1

您可以添加另一个动态创建的类，如:class: "oauth-icon #{provider}-icon"，这将保留 oauth-icon 类到位(我假设它是需要的)，然后添加一个 facebook-icon 类或 google_oauth2-icon 类，具体取决于提供者。