Add a little more efficiency into that second option and you've got the
method I use:
In a sass partial that you'll import into your main scss file - build your
mixin(s):
$min-bp-large: 747px;
@mixin bp-large {
@media only screen and (min-width: $min-bp-large) {
@content;
}
}
Then using it in your other scss is a snap - I find them much easier to
read too:
.selector {
color: red;
@include bp-large {
color: blue;
}
}
On Tue, May 31, 2016 at 11:06 AM, 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/
