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 CSS to Sass Refactoring with Sass Breaking the Style Sheet into Partials

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Posted by Montalvo Miguelo
Montalvo Miguelo
24,789 Points

Applying small changes to components in different locations ?

Default styles for .callout component are this:

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

And I have that component in my footer but I want to remove the border and margin without adding extra classes or modifier classes.

<footer class="main-footer">
  <p>All rights reserved to the state of <a href="#">California</a>.</p>
  <a href="#top">Back to top »</a>
  <a class="callout" href="#more">Follow me</a>
</footer>

Where would you apply that changes... maybe in scss/layout/_footer.scss partial ?

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

You can make a mixin like

@mixin callout($border-bottom, $margin-top) {
  font-size: 1.25em;
  border-bottom: $border-bottom;
  padding: 0 9px 3px;
  margin-top: $margin-top;
  display: inline-block;
}

Or whatever properties you want and then include them on their classes.

.callout {
   @include callout(3px solid, 20px);
}

footer .callout {
   @include callout(0, 0);
}

That's the best way I can think you could do it

2 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Montalvo,

I guess it depends. Is this link styling just for the footer only?

If it is then there's nothing wrong with adding it in to a _footer.scss partial as you suggested.

If you plan to use this across your site then maybe add it to a _links.scss partial and keep all your link styling there.

With SASS I wouldn't worry too much, just try to keep your partials organised so you know exactly where everything is.

Joe