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 Extend the Properties of Selectors

Sean Flanagan
Sean Flanagan
33,235 Points

Output doesn't appear

Hi.

As I was using the same workspace from the previous video, I used Sass CSS instead of regular CSS. I didn't want to go through the hassle of changing from one to the other. Consequently when I saved my work, the output for the button class and its extensions didn't appear in my style.css file.

My style.scss:

// VARIABLES ------------------------------------ /

$white: #fff;

$color-primary: #278da4;
$color-secondary: #b13c69;
$color-accent: #eeea72;
$color-shade: #eee;

$color-text: #343434;
$color-bg: #3acec2;
$color-bg-light: #009fe1;

$font-stack-primary: 'Raleway', sans-serif;
$font-stack-secondary: 'Bree Serif', serif;

$max-width: 1000px;

// MIXINS ------------------------------------ /

@mixin skewed {
  position: relative;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px; 
    position: absolute;
    transform: skewY(-2deg);
    @content;
  }
}

@mixin center {
  width: 90%;
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

/* BASE ------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  color: $color-text;
  font-size: 1rem;
  line-height: 1.5;
  font-family: $font-stack-primary;
  text-align: center;
  margin: 0;
}

h1,
h2 {
  font-family: $font-stack-secondary;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

p {
  margin-bottom: 1.25em;
  .intro & {
    font-size: 1.2em;
  }
}

a {
  color: $color-primary;
  text-decoration: none;
  &:hover {
    color: $color-secondary;  
  }
}

/* HEADER & FOOTER -------------------------------- */

header {
  height: 460px;
  background: linear-gradient($color-bg-light, $color-bg), url('../img/bg.jpg') no-repeat;
  background-blend-mode: multiply;
  background-size: cover;
  h1 {
    color: $white;
    font-size: 4.8em;
    margin-bottom: 0;
    letter-spacing: 1px;
  }
  p {
    color: $color-accent;
    font-size: 1.25em;
    margin: 0;
  }
  @include skewed {
    background-color: $white;
    bottom: -25px;
  }
}

footer {
  padding: 2em 0 0;
  height: 100px;
  background-color: $color-shade;
  margin-top: 3.5em;
  @include skewed {
    background-color: $color-shade;
    top: -25px;
  }
}


/* CONTAINERS ------------------------------------- */

.inner {
  padding: 0.5em 1em;
}

.intro {
  margin: auto;
  padding: 1em 1em 3em; 
}

/* COMPONENTS ------------------------------------- */

.main-nav {
  margin-top: 1em;
  li {
    display: inline-block;
    margin: 0 0.65em;
  }
  a {
    color: $white;
    font-size: 0.85em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.5em;
    transition: 0.3s;
    &:hover {
      color: $color-accent;  
    }
  }
}

.img-featured {
  width: 165px;
  border: 4px solid $white; 
  border-radius: 50%;
  margin-top: 75px;
  position: relative;
  z-index: 100;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5em 1em;
  border: 1px solid $color-shade;
  border-radius: 0.25em;
  h1 {
    margin: 0.35em 0 0;
    line-height: 1.25;
  }  
  .icon,
  h1 {
    color: $color-primary;
  }
}

%clearfix {
  &::after {
      content: "";
      display: table;
      clear: both;
    }
}

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


/* MEDIA QUERIES ---------------------------------- */

@media (max-width: 575px) {
  header {
    height: 340px;
    h1 {
      font-size: 3.4em;
    }
  }
  .img-featured {
    display: none;
  }
}

@media (min-width: 576px) {
  .main-content {
    display: flex;
    flex-wrap: wrap;
  }  
  .card {
    flex: 1;
  }
}

@media (min-width: 768px) {
  .main-content {
    @include center;
  }
}

@media (min-width: 992px) {
  header {
    background-position: 0 0, 0 45%;
  }
  .intro {
    width: 45%;
  }
}

And my style.css:

/* BASE ------------------------------------------- */
* {
  box-sizing: border-box; }

body {
  color: #343434;
  font-size: 1rem;
  line-height: 1.5;
  font-family: "Raleway", sans-serif;
  text-align: center;
  margin: 0; }

h1,
h2 {
  font-family: "Bree Serif", serif; }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

p {
  margin-bottom: 1.25em; }
  .intro p {
    font-size: 1.2em; }

a {
  color: #278da4;
  text-decoration: none; }
  a:hover {
    color: #b13c69; }

/* HEADER & FOOTER -------------------------------- */
header {
  height: 460px;
  background: linear-gradient(#009fe1, #3acec2), url("../img/bg.jpg") no-repeat;
  background-blend-mode: multiply;
  background-size: cover;
  position: relative; }
  header h1 {
    color: #fff;
    font-size: 4.8em;
    margin-bottom: 0;
    letter-spacing: 1px; }
  header p {
    color: #eeea72;
    font-size: 1.25em;
    margin: 0; }
  header::after {
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    transform: skewY(-2deg);
    background-color: #fff;
    bottom: -25px; }

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

/* CONTAINERS ------------------------------------- */
.inner {
  padding: 0.5em 1em; }

.intro {
  margin: auto;
  padding: 1em 1em 3em; }

/* COMPONENTS ------------------------------------- */
.main-nav {
  margin-top: 1em; }
  .main-nav li {
    display: inline-block;
    margin: 0 0.65em; }
  .main-nav a {
    color: #fff;
    font-size: 0.85em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.5em;
    transition: 0.3s; }
    .main-nav a:hover {
      color: #eeea72; }

.img-featured {
  width: 165px;
  border: 4px solid #fff;
  border-radius: 50%;
  margin-top: 75px;
  position: relative;
  z-index: 100; }

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5em 1em;
  border: 1px solid #eee;
  border-radius: 0.25em; }
  .card h1 {
    margin: 0.35em 0 0;
    line-height: 1.25; }
  .card .icon,
  .card h1 {
    color: #278da4; }

/* MEDIA QUERIES ---------------------------------- */
@media (max-width: 575px) {
  header {
    height: 340px; }
    header h1 {
      font-size: 3.4em; }

  .img-featured {
    display: none; } }
@media (min-width: 576px) {
  .main-content {
    display: flex;
    flex-wrap: wrap; }

  .card {
    flex: 1; } }
@media (min-width: 768px) {
  .main-content {
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto; } }
@media (min-width: 992px) {
  header {
    background-position: 0 0, 0 45%; }

  .intro {
    width: 45%; } }

/*# sourceMappingURL=style.css.map */

I think it might have helped if we were using a different workspace for this video and the next, with regular CSS.

Is it worth changing to regular CSS?

Thanks and merry Christmas

Sean

3 Answers

Aman Thakur
seal-mask
.a{fill-rule:evenodd;}techdegree
Aman Thakur
Full Stack JavaScript Techdegree Student 10,755 Points

Oh! My bad. That's an easy fix.

& is used for nesting. So just replace it with .btn class.

.btn-callout {
  @extend %btn;
  font-size: 1.1em;
  background-color: $color-secondary;
}

.btn-info {
  @extend %btn;
  font-size: 0.85em;
  background-color: $color-primary;  
  margin-top: auto;
  }
Aman Thakur
seal-mask
.a{fill-rule:evenodd;}techdegree
Aman Thakur
Full Stack JavaScript Techdegree Student 10,755 Points

Oh, I see this is where the problem is:

&-callout {
    @extend %btn;
    font-size: 1.1em;
    background-color: $color-secondary;
  }
  &-info {
    @extend %btn;
    font-size: 0.85em;
    background-color: $color-primary;  
    margin-top: auto;
  }

You're using @extend with placeholder that means it will never be in the output css file. And so, the nested rules also won't appear.

If you want your button rules in the output file, you have to move it outside the @extend just like this:

%btn {
  color: $white;
  display: inline-block;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.75em 1.5em;
  border-radius: 0.35em;
  &:hover {
    color: $white;
    opacity: .8;
  }
  &:active {
    opacity: initial; 
  }
}

&-callout {
  @extend %btn;
  font-size: 1.1em;
  background-color: $color-secondary;
}
&-info {
  @extend %btn;
  font-size: 0.85em;
  background-color: $color-primary;  
  margin-top: auto;
  }
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Aman. Thanks for trying to help.

I got an error message in the console:

error scss/partials/_helpers.scss (Line 26: Base-level rules cannot contain the parent-selector-referenc ing character '&'.) This might have something to do with the fact that I used the workspace from the previous video instead of the workspace for this one - I didn't know I was supposed to use a different workspace.

I've taken a snapshot of my workspace:

https://w.trhou.se/s8a3lsbjys

I hope this helps.

Thanks

Sean