How do I make min width and max widht with Sass in a variable?

Question

So i got usually $brk-small : '(min-width: 480px)'; but say i need to stop that on max-width 768px, how do i do it the Sass way? since sometimes i have to remove the nth-chidl(n2) for the desktop fomr the tables, which i need max-width for that.

Answer 1 · 2016-09-21T15:06:06Z

September 21, 2016 3:06pm

Hey Aurelian, check out this: https://css-tricks.com/approaches-media-queries-sass/

I think you'll really enjoy what the article goes over, and than use the one that you think works best for you. Good news is there is no right or wrong here as long as it gets you the results you need, in a way that makes sense. Remember the goal is to make your code easier to maintain, not add complexity to it. This article should break down a few techniques for you.

Answer 2 · 2016-09-21T15:09:58Z

September 21, 2016 3:09pm

You could create a mixin with the desired media queries breakpoints you want i.e (480 px) and store those breakpoints into a variable. Then you could @include the mixin into different css styles.

//Media queries

@mixin mq($break) {
    @if $break == "phone" {
        @media (min-width: $brkpoint-xs) and (max-width: $brkpoint-sm) {
            @content;
        }
    }
    @else if $break == "plusPhone" {
        @media (min-width: $brkpoint-sm +1){
            @content;
        }
    }
    @else if $break == "tablet" {
        @media(min-width: $brkpoint-md + 1){
            @content;
        }

    }
    @else if $break == "desktop" {
        @media(min-width: $brkpoint-lg){
            @content;
        }
    }
    @else {
        @error "Error, No value could be retrieved for '#{$break}' "
    }
}

Welcome to the Treehouse Community

Looking to learn something new?

Aurelian Spodarec

Aurelian Spodarec

How do I make min width and max widht with Sass in a variable?

2 Answers

Kevin Korte

Kevin Korte

Daniel Gonzalez

Daniel Gonzalez

Aurelian Spodarec

Aurelian Spodarec