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 Sass Basics Improve Your Workflow with Sass Use the Ampersand to Reference Parent Selectors

Jeremy Castanza
Jeremy Castanza
12,081 Points
Posted by Jeremy Castanza
Jeremy Castanza
12,081 Points

Sass compiling didn't move pseudo class to root level

Guil Hernandez, I had a question/bug possibly discovered. You mentioned that using the ampersand on a pseudo class like ::before or ::after would move the rule to the root of the CSS file. This did not occur when my file compiled. It's still nested.

Do you believe this has to do with an update to Sass, the fact that I'm using Windows, or a syntax issue on my end?

Beyond that, there's no issues. The rendered view is the same as the one that you have in the example. The only difference being that the pseudo class rules are nested in the CSS output.

Thanks!

2 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Ah, yes, CSS rules get indented based on how they were written in the source SCSS. Check out this video to learn commands you can use to change your output CSS. Have a look at the expanded flag.

Hope this helps.

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

Thanks for the clarification. That sounds about right. Looks like I was viewing output as nested, while the video's output was using expanded format or didn't have indentation. Definitely good info.

Here is another good resource related to the topic for anyone else browsing the thread: https://web-design-weekly.com/2014/06/15/different-sass-output-styles/

On a side note, are you guys planning on combining the Basic Sass and CSS to SASS courses? If not, might be worth putting in the pipeline at some point. Thanks!

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Jeremy Castanza,

Can you please include an example of your SCSS and CSS output? :)

Jeremy Castanza
Jeremy Castanza
12,081 Points
Jeremy Castanza
Jeremy Castanza
12,081 Points

I figured it out. You're correct in that it does split out the classes. The main issue is really with the indentation. The CSS output includes the indentation that the SCSS has, which gives the impression that it's still nested, even though its not. For some reason, my output is different in that regard from what you had in the video. Puzzling...

Thanks for the reply! :)

SCSS input

footer {
  padding: 2em 0 0;
  height: 100px;
  background-color: $color-shade;
  margin-top: 3.5em;
  position: relative;
  &::before {
      content: '';
      display: block;
      width: 100%;
      height: 50px;
      position: absolute;
      transform: skewY(-2deg);
      background-color: $color-shade;
      top: -25px;
    }
}

CSS output

footer {
  padding: 2em 0 0;
  height: 100px;
  background-color: #eee;
  margin-top: 3.5em;
  position: relative; }
  footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    transform: skewY(-2deg);
    background-color: #eee;
    top: -25px; }