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 trialSean Flanagan
33,235 PointsOutput 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
Full Stack JavaScript Techdegree Student 10,755 PointsOh! 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
Full Stack JavaScript Techdegree Student 10,755 PointsOh, 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
33,235 PointsHi 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:
I hope this helps.
Thanks
Sean