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.

Solution 1

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.

Solution 2

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;
}

Comments

[sites]

I made a{@extend .btn;} and the compiled css does not have any a{}, what could be happening?

[wisew]

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.

[sites]

I'd already bootstrap-sass installed

[Wottensprels]

What are the advatages of not using a mixin?

[M-Pixel]

@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.