rails bootstrap css optimisation

Question

I have many tables and instead of always giving the class %table.table.table-hover.table-condensed.table-responsive.table-bordered can I somehow set it as %table that will take all the other options from application.css.scss?

I tried

.table {
    .table-responsive;
    .table-bordered;
}

, but it shows wrong.

Any ideas?

How are you including Bootstrap in your Rails application? Via the official gem or some other means? — Bart Jedrocha
– Bart Jedrocha, Commented Feb 23, 2016 at 20:28

Cyril Lavedrine · Accepted Answer · 2016-02-23 20:32:56Z

1

@extend looks like the solution to your problem. Add the following to your scss :

table {
  @extend .table, .table-hover, .table-condensed, .table-responsive, .table-bordered
}

Be careful, though : @extend is tricky and doesn't adds the properties from .table, .table-hover, etc to your definition of 'table', but rather adds the content of the block to all the places in your compiled css where any of the other classes are mentioned.

answered Feb 23, 2016 at 20:32

Cyril Lavedrine

1611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yshmarov Over a year ago

Works great, Thank you! & can you tell me how to move a button class to scss? I currently have %td= link_to 'Show', product, class: 'btn btn-mini btn-success glyphicon glyphicon-search'. I tried to put class: 'button1' & scss @extend .btn, .btn-mini, btn-success, .glyphicon, .glyphicon-search, but it did not work. Mb something with spaces?

Cyril Lavedrine Over a year ago

You're using Bootstrap 2 ? I tried with the Bootstrap 3 equivalent .button1 {@extend .btn, .btn-xs, .btn-success, .glyphicon, .glyphicon-search}, it works fine. Edit you forgot a dot before btn-success, I don't see any other problem.

Yshmarov Over a year ago

Works this way! The .btn-mini does not work, so I did without it

Cyril Lavedrine Over a year ago

Great ! Could you please accept the answer, then ? :)

Collectives™ on Stack Overflow

rails bootstrap css optimisation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related