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 Modular CSS with Sass Modular Media Queries Building the Responsive Navigation

Posted by jlampstack
jlampstack
23,932 Points

Mobile First Approach?

I'm could be wrong, but I thought a mobile first approach is starting building your base styles for the smallest view first, and then adding more rules, thus building outwards as the view size increases.

In %_extends.scss at 50 seconds in the video Guil included mq(small), but wouldn't it be better to have it in the base styles and then include mq(medium) with the appropriate rules for the medium upwards screen size?

I am curious as to the logic. Any feedback appreciated, Thanks!

My solution...

}
%nav-item-link {
  font-size: em(18px);
  font-weight: $font-weight--light;
  display: block;
  padding: em(14px, 18px);
  border-bottom: 1px solid palette(grey, x-light);
  @include mq(medium) {
    padding: em(8px, 18px);
    border-bottom: 1px solid transparent;
  }
}
Hakim Rachidi
Hakim Rachidi
38,490 Points

You're totally right there. I just wanna started writing an new issue but then saw yours ; )

Sergio Andrés Herrera Velásquez
Sergio Andrés Herrera Velásquez
Courses Plus Student 23,765 Points

Since we are focusing on Sass I have the same impression as Christopher Canisius who states that from the very beginning Guil is just trying to exemplify Sass from from a regular approach, but you are definitely right, it should have started from a mobile-first approach, if it were a real webiste that he would be starting

1 Answer

Christopher Canisius
Christopher Canisius
10,647 Points
Christopher Canisius
Christopher Canisius
10,647 Points

Yes I am a 100% with you. I think Guil Hernandez just wanted to show the basic concepts of media query mixins. The video isn't called "Mobile First Approach". Maybe that would be too much to rethink for people that aren't familiar with mobile first.