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 Nested Selectors

Inconsistent 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.

Steven Parker
Steven Parker
231,269 Points

To 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. :arrow_heading_down:   Or watch this video on code formatting.

1 Answer

Thanks 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.