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

Kent Hefley
Kent Hefley
11,216 Points
Posted by Kent Hefley
Kent Hefley
11,216 Points

Please help me write better SASS/SCSS

Hello

I have begun using SCSS in my projects but still struggle finding the best solution when faced with issues like pseudo-elements. Can someone show me a better way to write the following code snippet using nesting, extends or mixins?

nav ul li a::before,
nav ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: $accent;
  left: 0;
  transform: scaleX(0);
  transition: all .3s;
}

nav ul li a::before {
  top: 0;
  transform-origin: left;
}

nav ul li a::after {
  bottom: 0;
  transform-origin: rightl
}

nav ul li a:hover::before,
nav ul li a:hover::after {
  transform: scaleX(1);
}

Any help would be appreciated. Thank you

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Looking at it, you could use either a placeholder or a mixin, or a combination of both. I'd go with a mixin that would therefore allow you to pass different values for the pseudo elements.

The main purpose of sass is to remove the repetition in our code. So when you see yourself repeating code like you are here, you want to use the power of sass through features like extends and mixins.