41

I want all my anchors in my application look like .btn (Twitter Bootstrap class), is there a way to make this?

I did

a{
  @include btn;
}

but it does not work because btn should be a mixin, and it's a Twitter Bootstrap class.

cimmanon
  • 67,211
  • 17
  • 165
  • 171
sites
  • 21,417
  • 17
  • 87
  • 146

2 Answers2

89

You want to use @extend .btn; - @extend allows you to inherit all the properties of a selector without having to define it as a mixin.

wisew
  • 2,672
  • 3
  • 23
  • 30
  • 3
    I made a{@extend .btn;} and the compiled css does not have any a{}, what could be happening? – sites Jul 11 '12 at 15:12
  • Can you edit your question to show the contents of your main application CSS? Mainly I want to see the the `//=require` directives, or the `@import` commands if you're using that. – wisew Jul 17 '12 at 16:41
  • What are the advatages of not using a mixin? – Wottensprels May 09 '13 at 20:39
  • 3
    `@extend` can't be used inside of a media query. If I want to use a class from an external library, like materialize, within a media query, `@extend` is not an option, and neither is going into the library code and changing the class declaration into a mixin declaration. Is there no option in this circumstance? Other preprocessors are fine using normal classes as if they were mixins. – M-Pixel Aug 14 '15 at 20:07
20

This is exactly what you want => https://github.com/thomas-mcdonald/bootstrap-sass

  1. Install the gem bootstrap-sass
  2. In config.rb => require 'bootstrap-sass'
  3. @import "bootstrap"; at the top of your scss file.

To use write

a {
  @extend .btn;
}
Aakash Goel
  • 1,169
  • 2
  • 13
  • 22