Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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: