Output doesn't appear

Question

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

Answer 1 · 2017-12-26T19:19:19Z

December 26, 2017 7:19pm

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;
  }

Answer 2 · 2017-12-26T02:23:54Z

December 26, 2017 2:23am

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;
  }

Answer 3 · 2017-12-26T15:06:22Z

December 26, 2017 3:06pm

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

Welcome to the Treehouse Community

Looking to learn something new?

Sean Flanagan

Sean Flanagan

Output doesn't appear

3 Answers

Aman Thakur

Aman Thakur

Aman Thakur

Aman Thakur

Sean Flanagan

Sean Flanagan