How to reuse a class in sass without using a mixin?

Question

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.

score 89 · Accepted Answer · answered Jul 11 '12 at 01:18

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.

answered Jul 11 '12 at 01:18

wisew

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

score 20 · Answer 2 · answered Aug 25 '12 at 10:09

20

To use write

a {
  @extend .btn;
}

answered Aug 25 '12 at 10:09

Aakash Goel

2 Answers2