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 trialJeffrey Collazo
34,492 PointsInconsistent Indentation
In running the sass watch operator, I am receiving the following error: error sass.css (Line 39: Inconsistent indentation: 2 spaces were used for indentation. but the rest of the document was indented using 8 spaces.)
Change detected to: scss.css
My code contains the following: // 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;
/* 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; }
/* 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; position: relative; }
header::after { content: ''; display: block; width: 100%; height: 50px; position: absolute; transform: skewY(-2deg); background-color: $white; bottom: -25px; }
header h1 { color: $white; font-size: 4.8em; margin-bottom: 0; letter-spacing: 1px; }
header p { color: $color-accent; font-size: 1.25em; margin: 0; }
footer { padding: 2em 0 0; height: 100px; background-color: $color-shade; margin-top: 3.5em; position: relative; }
footer::before { content: ''; display: block; width: 100%; height: 50px; position: absolute; transform: skewY(-2deg); 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; }
.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; }
.card h1 { color: $color-primary; margin: 0.35em 0 0; line-height: 1.25; }
.btn-info {
color: $white;
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: $color-primary;
margin-top: auto;
}
/* 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: 0 auto; } }
@media (min-width: 992px) { header { background-position: 0 0, 0 45%; } .intro { width: 45%; } }
I searched everywhere online to try and figure this out with no avail. Clueless on what to do do next.
Thanks.
1 Answer
Jeffrey Collazo
34,492 PointsThanks Steven,
I realized what I did. I wrote the code for the watcher incorrectly. I typed in the following (orginally): treehouse:~/workspace$ sass --watch scss.css
Instead, it should have been: treehouse:~/workspace$ sass --watch scss:css
What a difference a period and a colon can make.
Steven Parker
231,269 PointsSteven Parker
231,269 PointsTo format your pasted-in code so the spacing shows up, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. Or watch this video on code formatting.