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/
