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 Add Reusable Logic to Your Sass Storing Values in Maps

Saqib Ishfaq
Saqib Ishfaq
13,912 Points

please HELP! this is going way over my head:/

// media queries

@mixin mq($break) { $value: map-get($breakpoints, $break); $sml : map-get($breakpoints, 'sml');

@if $value < $sml {
   @media (max-width: $value){ 
   @content;
    }
  }
    @else {
    @media (min-width: $value){
        @content;  
    }
  } 

}

HI Saqib, I just watched this video, too (two different times). This last bit on mapping the media query values seemed a bit overkill and overly complex. Kind of like a Rube Goldberg device. Guil is obviously a sass and css master. While a lot of this sass stuff will save you time w/your CSS, you're not expected to incorporate all these complex sass methods. Start off basic w/your project 5 and only try using things you understand (variables, mixins, maybe some color functions). This method for mapping media queries was too complex for me, so for now, I'll just stick with trying to use variables for different breakpoints. Hope that helps.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points

Makes sense ! Yeah I just somehow finished the basics course with little knowledge of how sass work and its basis ! Hope it's enough for now and will come back to it may be later ,once Iam confident enough with what little I have learned so far going through this basics course !

Why do we need the if else statement? The $value should be the correct value for whatever size string it receives, and that should set the content.

11 Answers

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,544 Points

Thank god I'm not the only one breaking my brain on this stuff. Spent a good day trying to understand what's going on in the last 5-10 videos. I went for several walks to try and process the information and every time I get back I'm overwhelmed with another weird calculational displacement that's somehow supposed to make life easier.

Michael Kalmykov
Michael Kalmykov
8,919 Points

Just piling on here that while this is cool, it's largely impractical and overly engineered.

I echo the sentiment that is shared in this forum. I'm glad I'm not the only one.

Roald Jurrian Kamman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Roald Jurrian Kamman
Front End Web Development Techdegree Graduate 15,544 Points

Hey everyone, I posted here Nov 14, 2019. I have since gone full-stack, built multiple projects and websites, and niched down to Shopify development. Don't worry if you're not getting SCSS or any of this overcomplicated stuff. I have not used it in my career so far and don't see myself ever using it beyond copy pasting a specific thing I want to do. But I don't need to understand it to copy paste it... Shopify also moved to remove SCSS and went back to regular plain CSS because it's faster client side. Maybe harder to navigate but if you know how to use ctrl + f correctly and can find class names with dev tools you won't really need a super read friendly file when you're working on any project. You can also use !important if you can't find what's overriding your styles.

TLDR: Focus on understanding code logic and dataflow instead of weird tricks you will never use. Code is hard enough as it is, don't make it harder than it has to be.

Pedro Miranda
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Miranda
Front End Web Development Techdegree Student 7,505 Points

Ditto. It's all too much at once, there should be more room to experiment between the leap in sass lessons via course projects. It feels like its trying to shove you shortcuts for everything that took 4 courses to learn, into ONE course. Pretty unrealistic in my opinion. Its an entirely different language, we need to be able to practice certain aspects at length first before jumping into deeper layers, it feels like codeception when they try to tell you how to write the shortcut to the shortcut to the shortcut you just (hopefully) learned 20 minutes ago.

Pedro Miranda
seal-mask
.a{fill-rule:evenodd;}techdegree
Pedro Miranda
Front End Web Development Techdegree Student 7,505 Points

There needs to be a side by side panel for this lesson, is what keeps coming back to my head. The values he's trying to call up seem to be in the other file but we can't make the connections while he's talking about what they do/call up because we can't see that specific information while he's explaining. We can only see the values when we rewind, but then we can't see the strings that call them up. It just makes connecting the two very hard when they are not both present on the same screen or being toggled to and from enough, like we're used to doing for HTML/CSS changes. He's just changing strings and we are just left to try and visualize what that change represents. That's a big shift to how we're used to absorbing the information up to this point.

He does go back to the HTML file a fair bit though, but i think that's where another big issue is. The lesson shouldn't be "look, the html remains the same because I applied the shortcut correctly", it should be "Your HTML will remain the same because THIS is how we made sure to apply the shortcut correctly". The main focus should be on explaining sass more fundamentally, not the impact on the HTML file, we already know that all we're trying to do is make sure the HTML appearance in unchanged.

same here, my mind is overwhelmed with all this stuff!! it is clearly an advanced level of sass

Whew! I have been at this for a few days re-watching videos and have came to the exact same conclusion as all of you! It is way too intense and complicated at this level in the game. I completely broke my page trying to keep up.

Skyler Harris
Skyler Harris
7,670 Points

Glad it wasn't just me. Spent weeks on this. But I think for many of us this is also our first introduction to variables, strings, if/else statements, @for loops and @each loops so it seems daunting! Good luck everyone, you can do it!

Wasiu Hammed
seal-mask
.a{fill-rule:evenodd;}techdegree
Wasiu Hammed
Front End Web Development Techdegree Student 7,792 Points

Thanks, everybody, for the comments. Reading the comments tells me "you're not alone" and reinvigorates my "wants to do more." That being said, as a teacher and a content developer myself, I think the title of this unit is misleading (SASS Basis), and the presentation is confusing. Here are my suggestions:

  1. This lesson should come after a good foundation of JavaScript. Weirdly, someone new to HTML and CSS should jump into learning SASS at this level. SCSS grid should be moved here and SASS in the place of the CSS grid.

  2. The way the presenter is changing things is not comfortable. When you are happy that you've grabbed a lesson, the lesson that comes after will erase all that you understood with a new "jargon." There should be a specific implementation for each newly introduced concept without erasing the old idea.

  3. At the end of the whole lesson, there should be a walkthrough project that teaches implementing most of the valuable parts of the lesson.

Thanks.

Echoing the sentiment of everyone else here, the entire 4th part of the Sass Basics course seems like a massive leap to the rest of the course and seems quite out of place. Even more confusing was Guil calling variables stored in different files I didnt even know were there? It was all very deflating, I've decided to give up on part 4 and go to udemy for more sass related stuff.

Glad to read these comments...was thinking that it all seemed a little overly complex for a basics course!