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 Add Conditional Logic to Your Stylesheets

Hanna Zeif
Hanna Zeif
11,309 Points
Posted by Hanna Zeif
Hanna Zeif
11,309 Points

I don't understand the point...

I'm mostly following how this works. Thought variables were genius, mixins were a great idea; totally see how that makes this easier. But at this point, it seems to be making things more complicated and actually require writing more code. The only use I can see of doing the things shown in this video would be that it's a different way of organizing your code, which I would guess is a matter of personal preference. Is there any real benefit in doing things this way, as opposed to just writing out media queries (or whatever) straight in your code?

1 Answer

David McNeill
David McNeill
44,438 Points
David McNeill
David McNeill
44,438 Points

Hi Hanna,

I totally get why you would question this approach and why it seems so strange to be writing so much code. In this instance, it's about saving you lots of typing in the future! Media queries can be long and boring to type, and in a typical project you will write a LOT of media queries. Creating a mixin like this, although it takes some time in that moment, will allow you to quickly insert a media query into your CSS without typing it out in full, thus saving you time in the future. Also, the cool thing is you can add this mixin to your toolkit by carrying it over to other projects as well, saving even more time!

When I started working as a front-end developer, I quickly realised that having a bunch of useful mixins in your setup is a great time-saver and allows you to focus more on your project work. I've moved the same ones from project to project and only updated them occasionally. So it's worth putting in the time if you want to benefit in the future.

Hanna Zeif
Hanna Zeif
11,309 Points
Hanna Zeif
Hanna Zeif
11,309 Points

But don't you still have to type those media queries out? I couldn't understand why you might define your breakpoints as variables, when you then have to define those variables as well. Just write the breakpoints; if you need to change them later then find it (ctrl+f makes that easy) and change it. Unless you generally write a lot of media queries for a single breakpoint - in the Treehouse videos on media queries, all styles for a breakpoint were written in one media query, which is less complicated than this.

Thank you for your answer! The transferring of mixins from project to project is so smart!