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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

[SOLVED] Strange compilation of SCSS

Hi there everyone! I'm going through the new Sass Basics course and have encountered some strange behavior regarding the compilation of the scss to CSS. I am using the ruby gem version 3.4.23(Selective Steve). I have checked for updates and it states there is nothing to update. The CSS being generated is not what I'm expecting nor is it what Guil is showing in his video.

The exact same code (literally copy and pasted) into Sassmeister does produce the output I expect and that Guil shows. Yes, I'm watching the files for changes and it is compiling, but not in the way I would expect. For instance:

This rule:

.btn {
  color: $white;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;
  &-callout {
    font-size: 1.1em;
    background-color: $color-secondary;
  }
  &-info {
    font-size: 0.85em;
    background-color: $color-primary;  
    margin-top: auto;
  }
}

Compiles to this on Sassmeister (which is what I would expect):

.btn {
  color: #fff;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;
}
.btn-callout {
  font-size: 1.1em;
  background-color: #b13c69;
}
.btn-info {
  font-size: 0.85em;
  background-color: #278da4;
  margin-top: auto;
}

But on my system it compiles to this:

.btn-info {
  color: #fff;
  display: inline-block;
  font-size: 0.85em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;
  background-color: #278da4;
  margin-top: auto; }

Note that the base class for "btn" doesn't appear at all. This is the only rule for anything regarding btn in my generated CSS. I've even tried compiling directly from the finished code from the project files. And this is one example. There are others. What am I missing?

I appreciate any help! :sparkles:

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm leaving this post up in case anyone else runs into the same problem. When I was on Sassmeister I looked under "Options" to see which version of Sass I was using to compile the SCSS that was compiling correctly. As it turned out, it was using version 3.4.21. The version 3.4.23 isn't even listed as an option.

I removed the 3.4.23 version from my system using this command:

sudo gem uninstall sass

and installed the 3.4.21 version using this command:

sudo gem install sass --version 3.4.21

After doing so, the CSS generated is identical to the CSS produced by both Sassmeister and the instructor. My advice is to not update the gem from 3.4.21.

Hope this might help someone else who has run into the same problem! :sparkles: