変数にメディアクエリを保存する

Question

メディアクエリを変数として保存することはできますか？

これは動作しません：私は、最大幅と最小幅が、文字列全体を保存する方法を探していないよ

$max: @media (max-width: 980px) and (min-width: 768px); 

。

Answer 1

使用この

@mixin respondTo($media) { 
    @if $media == smallScreen { 
     @media only screen and (max-width: $screenSmall - 1) { @content; } 
    } @else if $media == mediumScreen { 
     @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; } 
    } @else if $media == largeScreen { 
     @media only screen and (min-width: $screenXlarge) { @content; } 
    } 
    } 

のようなものその後、あなたは次のように行うことができます。サス3.2のよう

.products { 
    @include respondTo(smallScreen) { 
    width: 300px; 
    } 

    @include respondTo(mediumScreen) { 
    width: 700px; 
    } 
} 

Answer 2

を、あなたはこのような変数でメディアクエリを保存することができます。

$bp-small: "(min-width: 30em)"; 

@media #{$bp-small} { 
    .foo { 
     color: red; 
    } 
}