Ruby on rails 如何使用bootstrap'；s响应性设计，无需所有重复代码？

也许我只是没有看到一些可以轻易纠正这一点的东西；然而，我发现当我使用bootstrap的响应式设计时，有时我倾向于重复代码。下面是我所说的一个例子。如何在不重复代码的情况下编写此示例，同时保持响应性设计

    <div class="col-xs-12 col-sm-9 col-md-6">
        <div class="row">
            <div class="col-sm-3 text-left hidden-xs hidden-sm visible-md visible-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-9 text-left hidden-xs hidden-sm visible-md visible-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %></h4>
                <h4><%= @club.division_and_conference %></h4>
            </div>
        </div>
    </div>

- 
- 

使用

SCSS

，您可以创建一个类并扩展其他类

<div class="resp-col-sm-3">
    <%= image_tag(@club.logo_image) %>  
</div>

---

另一种方法是将响应行为分解为不同的less文件，并基于不同的媒体查询定义类属性

<div class="col-sm-3 logo-image">
    <%= image_tag(@club.logo_image) %>  
</div>

“文本中心可见xs”的div将变为

@media screen and (min-width: 922px) {
    .logo-image{
        ...css property values
    }
}

@media screen and (max-width: 768px) {
    .logo-image{
        ...css property values
    }
}

---

这正是我个人的偏好，即基于不同的媒体查询而不是利用引导框架来组织css样式。

你可以尝试使用Haml（HTML抽象标记语言）和SASS/SCSS的组合。在我看来，将SASS/SCSS与Haml结合也是一种方法+1@kobaltz，我要回到这个问题上来。。现在这个解决方案解决了重复的类名问题——但是有没有办法避免多次加载图像？

@media screen and (max-width: 768px) {
    .logo-image{
        ...css property values
    }
}