ten sposób, aby osiągnąć to, co chcesz z punktu przerwania Sass (breakpoint-Sass altana pakiet). Próbowałem go w chrome (i symulować urządzenie z narzędziami web developper) i to działa.
// With third-party tool
// Breakpoint https://github.com/at-import/breakpoint
// You can find installation instructions here https://github.com/at-import/breakpoint/wiki/Installation
$mobile-landscape-breakpoint: 'only screen' 375px 667px, (-webkit-min-device-pixel-ratio 2), (orientation landscape);
body {
@include breakpoint($mobile-landscape-breakpoint) {
color: blue;
}
}
Jeśli punkt przerwania wydaje się zbyt skomplikowany, można to osiągnąć za pomocą własnego kodu. Na przykład:
// With Variable
$mobileLandscape: "only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)";
@media #{$mobileLandscape} {
body {
color: red;
}
}
// With Mixin
@mixin mq($breakpoint){
@if $breakpoint == "mobile-landscape"{
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
@content;
}
}
}
body{
@include mq("mobile-landscape"){
color: green;
}
}
Nie, to nie zadziała, pierwszy przy użyciu przerwania nie kierować krajobrazu dla mobilnych tylko, że cele i każdy przenośny tablet. Drugie rozwiązanie nie kompiluje się za pomocą gulp-sass. Ale przy używaniu zapytania o media tak, jak to działa dobrze, po prostu chcę użyć skrótu do tego zapytania o media, to jest to, więc pytam, jak użyć punktu przerwania, aby osiągnąć ten skrót. – Ruby
Rozwiązanie mixin wydaje się działać przy okazji, ale po prostu drapię się po głowie, jak to zrobić z breakpointem? Tam musi być nieobecny. – Ruby