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

Michael Kalmykov
Michael Kalmykov
8,919 Points
Posted by Michael Kalmykov
Michael Kalmykov
8,919 Points

I don't understand how using the media query conditional makes for smarter CSS

I get the same CSS output whether I

@include mq(lg) {
    width: 45%;
}

or i

@media (min-width: $break-l) {
    width: 45%;
}

4 Answers

Paul Walker
Paul Walker
28,904 Points
Paul Walker
Paul Walker
28,904 Points

I would stick with one standard media conditional. The W3c.org has several way to implement it. I like the one below.

@media screen and (min-width: 760px) { .container { width: 45%; } }

Michael Kalmykov
Michael Kalmykov
8,919 Points
Michael Kalmykov
Michael Kalmykov
8,919 Points

That's kind of what I was leaning towards. the alternative feels over-engineered.

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

To be clear, the code in your example is SCSS or Sass code, not regular CSS.

The advantage of having Sass mixins or variables is that you could change it in one place, and not have to search through your code for every place you've used a particular pixel value as the breakpoint.

If a CSS preprocessor like Sass doesn't make anything quicker or easier, then yes, you're right, there's no point using it, but for a great many people and projects, it definitely does!

That being said, with CSS variables quickly getting better browser support, we may be able to do much of this in regular CSS soon (though with a slightly more verbose syntax).

Gari Merrifield
Gari Merrifield
9,598 Points
Gari Merrifield
Gari Merrifield
9,598 Points

I don't understand the context of what you are asking here, but, media queries allow you to adjust the CSS values based on the size, orientation, media type, etc, that the page is being rendered on. It allows changing the width, height, order of display, font sizes, how a menu is displayed, etc.

Nermin Kekic
Nermin Kekic
6,971 Points
Nermin Kekic
Nermin Kekic
6,971 Points

Media query are handy for when you developing sites that will be viewed on different size screens. Everyone is using mobile phones, ipads to view websites. These devices have different size screens. Media query allows you to change your website layout on different size screens, so that end user experience is improved. For example, You would want one column layout on iphone and multiple columns on desktop for the same website, and media query is nice way to accomplish that.