Übersetzen von Medienabfragen von WENIGER zu SCSS

Question

Ich versuche, einige alte LESS-Stylesheets in SCSS zu aktualisieren, aber es kommt zu einem Problem bei der Übersetzung von Medienabfragen.

Je weniger Variablen sind wie folgt:

@lg: ~"(min-width: 1201px)"; 
@md: ~"(min-width: 993px)"; 
@sm: ~"(min-width: 769px)"; 
@xs: ~"(max-width: 768px)"; 

Und auf diese Weise verwiesen:

.modal-dialog { 
     margin: 100px auto; 
     @media @md { 
     width: 880px; 
     } 
    } 

ich diese in die folgenden SCSS Variablen übersetzt haben:

$lg: "#{min-width: 1201px}"; 
$md: "#{min-width: 993px}"; 
$sm: "#{min-width: 769px}"; 
$xs: "#{max-width: 768px}"; 

und die folgende Verwendung:

.modal-dialog { 
    margin: 100px auto; 
    @media ($md) { 
    width: 880px; 
    } 
} 

Der betreffende Code gehört zu einer .Vue-Komponente und wird mit dem SASS Loader FWIW kompiliert. Der Code kompiliert (keine Fehler), aber die eigentlichen Abfragen scheinen nicht zu funktionieren. Vielen Dank!

Answer 1

In SCSS/SASS der empfohlene Ansatz vollständige Medienabfragen zu speichern als Variablen wie folgt:

$lg: "(min-width: 1201px)"; 

.modal-dialog { 
    margin: 100px auto; 

    @media #{$lg} { 
     width: 880px; 
    } 
} 

die zu

kompiliert

.modal-dialog { 
    margin: 100px auto; 
} 

@media (min-width: 1201px) { 
    .modal-dialog { 
     width: 880px; 
    } 
}