SASS媒體查詢最佳做法？

將媒體查詢嵌套到元素中可以嗎？如果我想在其他地方使用min-width: 480px，會有巨大的重複。請看我的代碼示例。或者只是用舊的方式？任何想法？SASS媒體查詢最佳做法？

SASS

.navbar { 
    height: 500px; 
    width: 500px; 

    @media screen and (min-width: 480px) { 
     background-color: lightgreen; 
    } 
} 

.items { 
    padding: 15px; 
    color: red; 

    @media screen and (min-width: 480px) { 
     border: 1px solid black; 
    } 
}

CSS

@media screen and (min-width: 480px) { 
    .navbar { 
     background-color: lightgreen; 
    } 

    .items { 
     border: 1px solid black; 
    } 
}

來源

2016-09-29 Janath

真的取決於項目海事組織。對於較小的項目，只要它是可讀的，我相信最初的一個是可以的。但對於最佳做法，我會使用「舊」的方式來定義媒體查詢。你可能想看看ITCSS – adamk22

伊莫這絕對是最好的方式。爲了避免「巨大的重複」，爲什麼不把'min-width：480px'存儲爲變量？ '@media屏幕和（$分辨率 - 小）{...}'或其他... –

@EdmundReed：但它也在重複媒體查詢語句。 – Janath

$pc: 1024px; // PC screen size. 
$tablet: 720px; // Tablet screen size. 
$phone: 320px; // Phone screen size. 

@mixin responsive($media) { 
    @if $media= phone { 
    @media only screen and (max-width: $tablet - 1) { 
     @content; 
    } 
    } 
    @else if $media= tablet { 
    @media only screen and (min-width: $tablet - 1) and (max-width: $pc) { 
     @content; 
    } 
    } 
    @else if $media= pc { 
    @media only screen and (min-width: $pc + 1) and (min-width: $pc) { 
     @content; 
    } 
    } 
    @else if $media= pc_tablet { 
    @media only screen and (min-width: $tablet - 1) { 
     @content; 
    } 
    } 
}

例子

body { 
    @include responsive(pc) { 
    background: red; 
    } 
    @include responsive(tablet) { 
    background: yellow; 
    } 
    @include responsive(phone) { 
    background: green; 
    } 
}

來源

2017-03-21 21:32:34

SASS媒體查詢最佳做法？

回答

相關問題