从引导类创建自定义CSS助手

我是Bootstrap和CSS/SCSS的新手。我有一个按钮组，我在我的rails应用程序中的许多不同位置使用它。从引导类创建自定义CSS助手

<div class="btn-group" role="group"> 
     <%= link_to lesson, class: 'btn btn-sm btn-outline-primary' do %> 
      <i class="fa fa-eye" aria-hidden="true"></i> 
     <% end %> 

     <%= link_to edit_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %> 
      <i class="fa fa-pencil" aria-hidden="true"></i> 
     <% end %> 

     <%= link_to lesson, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-outline-primary' do %> 
      <i class="fa fa-trash" aria-hidden="true"></i> 
     <% end %> 

     <%= link_to vocabs_by_lesson_path(lesson), class: 'btn btn-sm btn-outline-primary' do %> 
      <i class="fa fa-arrow-down" aria-hidden="true"></i> 
     <% end %> 

</div>

正如你所看到的，我经常使用'btn btn-small btn-outline-primary'。我想定义一个css助手（或像这样），这样我就可以这样写：

class: 'action-button'

，而不是

class: 'btn btn-sm btn-outline-primary'

这将使其更容易改变按钮的布局只是在一个地方。我不知道如何创建一个类（action_button），它只是扩展了所有的引导类/助手'btn'，'btn-sm'和'btn -outline基色“。

在此先感谢。

来源

2017-07-19 Jzui

可能的重复[如何编写multipl e类转换为单个语义命名的类？]（https://stackoverflow.com/questions/24716592/how-to-compose-multiple-classes-into-a-single-semantically-named-class） – fen1x

您可以使用sass的功能extend。和写scss是这样的：

.action-button { 
    @extend .btn; 
    @extend .btn-sm; 
    @extend .btn-outline-primary; 
}

请如果可能的话使用选择器类（其与%启动类），而不是与正常的类延伸。

来源

2017-07-19 08:00:07

老实说，这个btn btn-large btn-success规则仍然是定制css规则的最好方法，因为每个规则组合都会产生另一个效果，但是如果您想改变它的工作方式，您可以使用mixins，因为您使用rails该合并SCSS它可能做在它下面是混入代码示例，您可以用它来实现的，如果要合并的引导CSS，那么你必须检查BTN CSS规则设置，并把里面混入

@mixin btn-rule($value) { 
    -webkit-border-radius: $value; 
    # insert same css rule of btn here 
} 

.box-2 { 
    @include btn-rule(10px); 
    font-size: 12px; 
} 

.box-2 { 
    @include btn-rule(5px); 
    font-size: 30px; 
}

如果你想了解更多，那么sass guide是很好的资源

来源

2017-07-19 08:06:50 widjajayd

从引导类创建自定义CSS助手

回答

相关问题