-1

I currently have a lot of buttons in various views with the following classes applied class="btn btn-primary btn-sm custom". How do I include "btn btn-primary btn-sm" within "custom" in my CSS so that I can just use the single class rather than specifying each separately?

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
user1175969
  • 540
  • 6
  • 19
  • Doing so defeats the purpose of using a framework... but all you would need to do is create a class of `.custom { }` that has all of the style attributes of `.btn`, `.btn-primary`, and `.btn-sm`. – Robert Jul 05 '16 at 17:03
  • Can you just use .btn.custom as your selector? I'm not sure if that'd interfere with anything else you're doing, but it'd let you apply all of your styling to every button with the custom class on it. – will Jul 05 '16 at 17:05
  • Why should it defeat the purpose of using a framework? The idea is to avoid code duplication and it also makes maintenance easy. I want all buttons to have the same style. Let's say I want to change from `btn-sm` to `btn-md`, I'd have to change this all the buttons across all views. If I could define a `custom` class that included this definition, then I need to change this in only 1 place. – user1175969 Jul 05 '16 at 17:06

1 Answers1

0

LESS supports mixins, but you will have to import the bootstrap.less file first.

For a mixin, the syntax is:

.custom {
    .btn;
    .btn-primary;
    .btn-sm;
}

For info on importing bootstrap.less as just a reference for your mixins, see Reference a class/mixin without completely importing the LESS file

Community
  • 1
  • 1
4castle
  • 32,613
  • 11
  • 69
  • 106
  • 1
    I added the above to my `scss` file and I get the error "Invalid CSS after " .btn": expected "{", was ";"". How do I import `bootstrap.less`? – user1175969 Jul 05 '16 at 17:14
  • 1
    SCSS is a completely different pre-compiled CSS language. Did you tag `less` to your question by mistake? The syntax in SCSS is `@extend .btn;`, and you will have to import a `bootstrap.scss` – 4castle Jul 05 '16 at 17:17
  • Thanks! What's interesting is that `@extend .btn-sm;` works fine, but `@extend .btn-md;` throws the error: ".button-custom" failed to @extend ".btn-md". – user1175969 Jul 05 '16 at 17:51
  • 1
    There's no such thing in Bootstrap as `btn-md`. To have a medium sized button, just leave off the sizing class entirely. – 4castle Jul 05 '16 at 17:52
  • This solution won't actually work as you expect. Bootstrap CSS rulesets are *not* designed to be used as mixins of any kind. See [this collection](https://gist.github.com/seven-phases-max/cefc873a78fa12924462) of links for more details. – seven-phases-max Jul 05 '16 at 19:01
  • @seven-phases-max Thanks for the heads up. Please add that information to the question in a comment, so that I can safely delete my answer without removing that important information from the post. Does that mean the question I linked to is also wrong? – 4castle Jul 05 '16 at 19:05