メディアクエリでSASS変数を更新できますか？

Question

次のSASSコードを検討してください。画面が1250pxより大きい場合は、margin-topは750pxである必要があります。サイズに応じて変更する必要があります。しかしSASSでは、文字列内の変数を更新することはできません。それが仕事と750pxでpage-template滞在しないよう

// Above 1250px 
$pageTemplateMargin:750px; 

// Below 1250px 
@media screen and (max-width:1250px){ 
    $pageTemplateMargin:550px; 
} 

// Below 950px 
@media screen and (max-width:950px){ 
    $pageTemplateMargin:450px; 
} 

@media screen and (max-width:850px){ 
    $pageTemplateMargin:150px; 
} 

@media screen and (max-width:750px){ 
    $pageTemplateMargin:250px; 
} 

// Render the correct code 
.page-template {margin-top:$pageTemplateMargin} 

は、このためのより良い方法があります。

おかげ

Answer 1

私はそれがこのケースでmapsを使用することをお勧めします受け入れ答えに同意するが、私は物事のカップルを指摘したいと思います。

実際には、メディアクエリ内で変数を更新できます。問題は、ブロックの外側に定義された変数がグローバル変数変数であり、ブロック内で定義された変数がローカル変数変数であることです。 ！globalキーワードを使用して、ブロック内の変数をグローバル変数として扱うことができます。

$pageTemplateMargin:750px; 

@media screen and (max-width:1250px){ 
    $pageTemplateMargin: 550px !global; 
} 

.page-template { 
    margin-top: $pageTemplateMargin //will use 550px instead of 750px 
} 

このユースケースでは適切ではないが、可能であることを明確にしたい。

あなたのコードにはloopを使用することをお勧めします。特に画面の幅と余白のプロパティを追加してさらにメディアクエリを書く必要がない場合に役立ちます。

$breakpoints: (
    1200px: 10px, 
    1000px: 15px, 
    800px: 20px, 
); 

@each $width, $margin in $breakpoints { 
    @media screen and (max-width: $width) { 
    .element { 
     margin-top: $margin; 
    } 
    } 
} 

希望します。

Answer 2

いいえ、あなたはできません（このような状況では、他の回答で指摘したように）。

私はこれで動作するようにmixinsを使用することをお勧めしたい：

@mixin pageTemplateMargin($px) { 
    margin-top: $px 
} 

@media screen and (max-width:1250px) { 
    .element { @include pageTemplateMargin(10px);} 
} 
@media screen and (max-width:1000px) { 
    .element { @include pageTemplateMargin(15px);} 
} 
@media screen and (max-width:800px) { 
    .element { @include pageTemplateMargin(20px);} 
} 

などSASSオブジェクトを通じてマッピングの方法もあります：これは、あなたがグローバルに変更できるようになる

$breakpoints: (
    1200: 10px, 
    1000: 15px, 
    800: 20px, 
); 

@media screen and (max-width:1200px) { 
    .element { margin-top: map-get($breakpoints, 1200);} 
} 
@media screen and (max-width:1000px) { 
    .element { margin-top: map-get($breakpoints, 1000);} 
} 
@media screen and (max-width:800px) { 
    .element { margin-top: map-get($breakpoints, 800);} 
} 

は、 1変数を調整することによってマージン。

Working codepen example