SUSY2 – SCSS – CSS – 依照高度不同做不同的顯示

2014-11-14 / JSN / 0 Comments / 166 次瀏覽

一般在做SUSY的時候，我們通常響應的是螢幕「寬度」。但假如要針對不同的螢幕高度做調整，該怎麼做呢？

若使用 breakpoint

.box
{
    $height: (min-height 100px);
    @include breakpoint($height) {
        color:red;
    }
}

產出CSS

@media (min-height: 100px) {
  .box {
    color: red;
  }
}

可參考原生 breakpoint plugin 說明

若使用 susy-breakpoint

*susy-breakpoint 的第二個參數 $layout 自 v2.2.1 之後，就可以為非必填參數了，所以下面的null也可以不用填寫。參考

.box 
{
    //0~200px
    @include susy-breakpoint((min-height: 0px), null) {
        background: red;
    }

    //200~500px
    @include susy-breakpoint((min-height: 200px), null) {
        background: green;
    }
    
    //500px以上
    @include susy-breakpoint((min-height: 500px), null) {
        background: blue;
    }
}

產出CSS

@media (min-height: 0px) {
    .container .box {
        background: red;
    }
}
@media (min-height: 200px) {
    .container .box {
        background: green;
    }
}
@media (min-height: 500px) {
    .container .box {
        background: blue;
    }
}

可參考SUSY2基於breakpoint的修改說明

線上範例，使用 susy-breakpoint。請嘗試改變畫面高度

Play with this gist on SassMeister.