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 Sass Basics Improve Your Workflow with Sass Extend the Properties of Selectors

Sean Flanagan
Sean Flanagan
33,231 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,743 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,231 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

Aman Thakur
seal-mask
.a{fill-rule:evenodd;}techdegree
Aman Thakur
Full Stack JavaScript Techdegree Student 10,743 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;
  }