Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

How would you make buttons using Sass?

How wodul you make buttons using Sass?

WOudl you make a file names e.g. extends in folder modules, and then write e.g. [class*=btn--] ? or such? or extend btn in the button component or?

1 Answer

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

It seems what you're asking is really just a matter of choice right? What everyone's preferences are.

What I tend to do what would looking think this.

.btn {
  // assign all my defaults here

  &--primary {
    // setup my primary specific details
  }

  &--secondary {
    // setup any additional classes for modifier buttons.
  }

  &--small { ... }
  &--large { ... }
}

So .btn would have all of the CSS in it to create a basic button. Padding, font size, weight, whatever. Then my primary class would just change things like background color, text color, and maybe border color.

Then I could do something like:

<a href="" class="btn">My Link</a> for a basic button or <a href="" class="btn btn--primary">My Primary Link</a> Now if I wanted to make that larger or smaller I could add the .btn--small or .btn--large modifier classes to adjust the size of that button.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Yes, you are, I suppose absolutely right. What I'm trying to do, is to try and discover things that I don't know. Because " I don't know, what I don't know" and then, if i see more stuff from other people, I can develop my self a lot quicker, as well as see other ways to do this. The way I was doing it my self, I absolutely hated it, but then, there you go, you posted a simple answer, and I was over complicating my self : p stressing too much? um I don't know, maybe, but at the end I need to push throw the learning curve : p and build a deep foundation, not just be good : p

But this is what I'm trying to achieve basically, see the 'senior developer' code. I might choose mine way or not, but at least I see a new way, something different etc.

But I love this answer, thank you :D