I have used the method from the second article since I started using Sass. I break components/objects/atoms/whatever into their own file and it makes more sense, to me, to include the media query with the components.
I make mine "more inline" though: .selector { color: red; @media (min-width: 767px) { color: blue; } } On Tue, May 31, 2016 at 12:07 PM Tom Livingston <tom...@gmail.com> wrote: > Listers, > > I was just reading a great article by Veerle Pieters ( here > < > http://veerle.duoh.com/design/article/my_process_of_creating_the_arriva_web_site > > > ) which linked to another article ( here > <https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/> ) that > made me stop and think about how I implement media queries and wondered if > it was a good or bad way of doing it or if it doesn't matter (other than > personal preference). This in turn moved me to post this to the list: > > I use Sass for writing css. I have some base files like normalize, a fonts > scss file, a colors file etc. For the bulk of my styles, I break them up > based on breakpoint and import them into a main scss file, like so: > > @import "colors"; > @import "fonts"; > @import "base"; > > @media only screen and (min-width: 40em){ > @import "tablet"; > } > @media only screen and (min-width: 60em){ > @import "desktop"; > } > > The second article linked above is a neat Sass mixin to easily implement > MQs where needed, sort of "in-line" with your element's styles and having > your MQs all mixed into a single sheet, like: > > .selector { > color: red; > } > @media (min-width: 767px) { > .selector { > color: blue; > } > } > > My question is, is either of these methods more efficient/performant than > the other? My preferred method seems easier to keep organized (both in my > head and file-wise) but is it slower/less efficient? > > TIA > > > > > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/