Ik vraag me af of er een manier is om media-query’s in Sass te schrijven, zodat ik een bepaalde stijl kan geven tussen Laten we zeggen: 300px tot 900px
In CSS ziet het er als volgt uit
@media only screen and (min-width: 300px) and (max-width: 900px){
}
Ik weet dat ik
kan schrijven
@media (max-width: 900px)
in sass, maar hoe maak je dat bereik?
Antwoord 1, Autoriteit 100%
$small: 300px;
$medium: 900px;
.smth {
//some CSS
@media screen and (max-width: $small) {
//do Smth
}
@media screen and (min-width: $medium) {
//do Smth
}
}
zoiets?
Antwoord 2, Autoriteit 24%
Dit is wat ik gebruik voor een mixin met sass, het stelt me in staat om snel het breekpunt te verwijzen dat ik wil. Uiteraard kunt u de Media Query-lijst aanpassen om uw project Mobile Fist enz.
Maar het zal meerdere query’s voor u doen als ik geloof dat u om vraagt.
$size__site_content_width: 1024px;
/* Media Queries */ Not necessarily correct, edit these at will
$media_queries : (
'mobile' : "only screen and (max-width: 667px)",
'tablet' : "only screen and (min-width: 668px) and (max-width: $size__site_content_width)",
'desktop' : "only screen and (min-width: ($size__site_content_width + 1))",
'retina2' : "only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)",
'retina3' : "only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)",
'landscape' : "screen and (orientation:landscape) ",
'portrait' : "screen and (orientation:portrait) "
);
@mixin for_breakpoint($breakpoints) {
$conditions : ();
@each $breakpoint in $breakpoints {
// If the key exists in the map
$conditions: append(
$conditions,
#{inspect(map-get($media_queries, $breakpoint))},
comma
);
}
@media #{$conditions} {
@content;
}
}
Gebruik het als volgt in uw SCSS:
#masthead {
background: white;
border-bottom:1px solid #eee;
height: 90px;
padding: 0 20px;
@include for_breakpoint(mobile desktop) {
height:70px;
position:fixed;
width:100%;
top:0;
}
}
Dan zal dit compileren naar:
#masthead {
background: white;
border-bottom: 1px solid #eee;
height: 90px;
padding: 0 20px;
}
@media only screen and (max-width: 667px), only screen and (min-width: 1025px) {
#masthead {
height: 70px;
position: fixed;
width: 100%;
top: 0;
}
}
Antwoord 3, Autoriteit 13%
Controleer dit voor SCSS.
https://github.com/necromancerx/media-queries-scss-mixins
gebruik
.container {
@include xs {
background: blue;
}
@include gt-md {
color: green
}
}
Demo : Stackblitz
Gebaseerd op hoekige FlexLayout MediaQueries
Antwoord 4, Autoriteit 3%
$small: 300px;
$medium: 900px;
@media screen and (min-width: $small) and (max-width: $medium) {
//css code
}