Kann ich SASS-Variablen in Media Queries aktualisieren?

Question

Betrachten Sie den folgenden SASS-Code. Ich möchte sicherstellen, dass, wenn der Bildschirm über 1250px ist, dann sollte die margin-top750px sein und dann sollte es je nach Größe ändern. Allerdings erlaubt SASS mir nicht, die Variablen innerhalb der Strings zu aktualisieren.

// 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} 

Gibt es eine bessere Art und Weise dafür, da es nicht und page-template Aufenthalte in 750px funktioniert.

Dank

Answer 1

ich mit der akzeptierten Antwort darüber einig, dass es besser ist, maps in diesem Fall zu verwenden, aber ich mag ein paar Dinge hinweisen.

Variablen können tatsächlich in Medienabfragen aktualisiert werden. Das Problem ist, dass eine außerhalb eines Blocks definierte Variable eine globale Variable ist, während eine Variable innerhalb eines Blocks eine lokale Variable ist. Sie können sass eine Variable innerhalb eines Blocks als globale Variable behandeln lassen, indem Sie das Schlüsselwort ! Global verwenden.

$pageTemplateMargin:750px; 

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

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

Ich möchte nur klarstellen, dass es möglich ist, obwohl es in diesem Anwendungsfall nicht geeignet ist.

Ich empfehle auch eine loop für Ihren Code, die hilfreich sein wird, vor allem, wenn Sie mehr Bildschirmbreiten und Randeigenschaften hinzufügen, so dass Sie nicht weitere Medienabfragen schreiben müssen.

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

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

Ich hoffe, dies hilft.

Answer 2

Nein, Sie können nicht (in dieser Situation, wie sie in der anderen Antwort darauf hingewiesen).

würde ich mit mixins vorschlagen damit arbeiten:

@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);} 
} 

Es gibt auch eine Möglichkeit der Kartierung durch sass Objekte, wie zum Beispiel:

$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);} 
} 

Dies Sie die global erlauben würde sich ändern Marge durch Anpassung von 1 Variable.

Working codepen example