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 Add Reusable Logic to Your Sass Write Loops with @for

Amandeep Pasricha
Amandeep Pasricha
14,932 Points

How to properly include an if statement inside a for loop in sass?

I'm working on project 4 and trying to isolate grid__col--12 and give it specific properties within the if statement, and give the rest of the columns the properties contained in the else branch. However, it's not working out for me. How can I accomplish what I am trying to do?

Did I write the for loop wrong or something? https://ibb.co/whh86vW

As you can see in the photo below, the black line covering the flex item reveals that the flex item is still a row. I don't want that of course. I wanted it to get the properties under the if branch. https://ibb.co/pv6ptyZ

Here is a link to my question on stack overflow if more information is needed. https://stackoverflow.com/questions/56418618/how-to-properly-include-an-if-statement-inside-a-for-loop-in-scss

1 Answer

Hi

The reason it is not working is because you have compiler errors in your scss.

1.

Problem

Compilation Error
Error: required parameters must precede optional parameters
        on line 170 of sass/c:\dev\workspace\app\tes\test.scss
>> @mixin links($text-dec: none, $color, $font-weight: null) {

solution - required params first

@mixin links($color, $text-dec: none, $font-weight: null)

2.

problem

Compilation Error
Error: You may not @extend an outer selector from within @media.
       You may only @extend selectors within the same directive.
       From "@extend %grid" on line 121 of sass/c:\dev\workspace\app\tes\test.scss
        on line 110 of sass/c:\dev\workspace\app\tes\test.scss
>> %grid {

Solution - extend within a mixin

@mixin test {
    @extend %grid;
}

.grid__col--#{$number}.theme__colors {
    @include test;
}