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

Brad Lacke
Brad Lacke
7,438 Points

What is the correct way to apply Sass conditionals inside a mixin?

I'm trying to exercise my Sass Basics by going back and doing CSS Foundations again, but refactoring everything to be in Sass. Obviously, this is overkill from an efficiency standpoint, but I figure it's good practice. Case in point, it's abundantly clear that I don't really know what I'm doing.

In this early lesson, Guil is showing us how to keep our code dry by combining selectors and creating three CSS shapes, a square, circle, and ellipse. To test myself I made a mixin instead and tried to apply some conditionals for the round shapes. It didn't work. Everyone's getting a border radius, even after I checked the syntax on the Sass documentation.

Obviously I'm doing something wrong. Any Sasstronauts available to tell me where I'm fudging this?

Code:

body {
    padding-top: 50px;
    text-align: center;
}

/* Shapes */

@mixin shape-base($shapes...) {
    @each $shape in $shapes {
        .#{$shape} {
            display: inline-block;
            margin: 0 15px;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            @if $shape == circle or ellipse {
                border-radius: 50%;
            }
            @if $shape == ellipse{
                height: 120px;
            }
        } 
    }   
}
@include shape-base(square, circle, ellipse);

2 Answers

cesarruelas
cesarruelas
27,718 Points

Change

@if $shape == circle or ellipse

to

@if $shape == circle or $shape == ellipse

What your program is doing right now is checking if $shape is equal to circle OR if ellipse is true, which could lead to the buggy behavior you're experiencing. Check out this site for more information or this StackOverflow thread.

Brad Lacke
Brad Lacke
7,438 Points

Brilliant!!! Thanks very much.