Utilizzo di variabili Sass con query media CSS3

Sto cercando di combinare l’uso di una variabile Sass con le query @media come segue:

$base_width:1160px; @media screen and (max-width: 1170px) {$base_width: 960px;} @media screen and (min-width: 1171px) {$base_width: 1160px;} 

$base_width viene quindi definito in vari punti nelle misure basate sulla percentuale della larghezza del foglio di stile per produrre layout fluidi.

Quando faccio questo, la variabile sembra essere riconosciuta correttamente ma le condizioni per la query multimediale non lo sono. Ad esempio, il codice sopra riportato produce un layout di 1160 px indipendentemente dalla larghezza dello schermo. Se flip-flop le istruzioni @media in questo modo:

 @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} 

Produce un layout a 960 px, sempre indipendentemente dalla larghezza dello schermo. Si noti inoltre che se rimuovo la prima riga di $base_width: 1160px; restituisce un errore per una variabile non definita. Qualche idea su cosa mi manca?

Questo semplicemente non è ansible. Poiché la @media screen and (max-width: 1170px) trigger @media screen and (max-width: 1170px) verificano sul lato client.

Raggiungere i risultati attesi sarebbe ansible solo se SASS ha acquisito tutte le regole e le proprietà del foglio di stile contenente la variabile $base_width e le ha copiate / modificate di conseguenza.

Dal momento che non funzionerà automaticamente, potresti farlo a mano in questo modo:

 @media screen and (max-width: 1170px) $base_width: 960px // you need to indent it to (re)set it just within this media-query // now you copy all the css rules/properties that contain or are relative to $base_width eg #wrapper width: $base_width ... @media screen and (min-width: 1171px) $base_width: 1160px #wrapper width: $base_width ... 

Questo non è proprio ASCIUTTO ma il meglio che puoi fare.

Se le modifiche sono le stesse ogni volta puoi anche preparare un mixin contenente tutti i valori che cambiano, quindi non dovrai ripeterlo. Inoltre puoi provare a combinare il mix con cambiamenti specifici. Piace:

 @media screen and (min-width: 1171px) +base_width_changes(1160px) #width-1171-specific-element // additional specific changes, that aren't in the mixin display: block 

E il Mixin sarebbe simile a questo

 =base_width_changes($base_width) #wrapper width: $base_width 

Simile alla risposta di Philipp Zedler, puoi farlo con un mixin. Ciò ti consente di avere tutto in un singolo file, se vuoi.

 @mixin styling($base-width) { // your SCSS here, eg #Contents { width: $base-width; } } @media screen and (max-width: 1170px) { @include styling($base-width: 960px); } @media screen and (min-width: 1171px) { @include styling($base-width: 1160px); } 

Modifica: per favore non usare questa soluzione. La risposta di ronen è molto meglio.

Come soluzione DRY, è ansible utilizzare l’istruzione @import all’interno di una query multimediale, ad esempio in questo modo.

 @media screen and (max-width: 1170px) { $base_width: 960px; @import "responsive_elements"; } @media screen and (min-width: 1171px) { $base_width: 1160px; @import "responsive_elements"; } 

Si definiscono tutti gli elementi responsive nel file incluso utilizzando le variabili definite nella query multimediale. Quindi, tutto ciò che devi ripetere è la dichiarazione di importazione.

Ho avuto lo stesso problema.

La variabile $menu-width dovrebbe essere 240px nella @media only screen and (max-width : 768px) visualizzazione mobile @media only screen and (max-width : 768px) e 340px nella visualizzazione desktop .

Quindi ho semplicemente creato due variabili:

 $menu-width: 340px; $menu-mobile-width: 240px; 

Ed ecco come l’ho usato:

 .menu { width: $menu-width; @media only screen and (max-width : 768px) { width: $menu-mobile-width; } }