Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

使用SMACSS製作button

module抽離出常用元件,負責大致的外觀

SMACSS是Jonathan Snook所發表的一個CSS/SASS的設計模式。在製作button時我們會把它放在module資料夾底下,並存成檔名為_btn.scss。在modules資料夾中的_btn.scss裡面撰寫Button的外觀,需要注意的是不包含顏色和其他特效。這樣是為了將顏色和細部調整放到之後的_theme.scss檔案中做調整。為什麼要這樣做呢?這樣做可以在有多個佈景主題的時候很方便的切換。也比較知道現在在這個檔案我要做哪些事情。不會一堆css碼做了什麼事情要一一去解讀。

modules/_btn.scss負責大致上的外觀

.btn {
    display: inline-block;
    height: 3rem;
    padding: 0 1rem;
    outline: none;

    border: 1px solid;

    font-size: 1.125rem;

    @include border-radius(3px);
}

完成圖片

theme負責顏色、陰影...等佈景主題需要的修飾

theme/_theme.scss中將按鈕的顏色、陰影效果、hover效果補上。因為主題可能有多個,所以我們抽離出來撰寫。以後想要加上別的主題的時候CSS碼就步會搞的很混亂。

/* Buttons */
.btn {
    background-color: $color-1;

    color: $color-text;

    border-color: darken($color-1, 20%);

    @include box-shadow(0 -2px 0 0 darken($color-1, 20%) inset);

    &:hover {
        background-color: darken($color-1, 5%);
    }
}

.btn-primary {
    background-color: $color-link;

    color: #fff;

    border-color: darken($color-link, 20%);

    @include box-shadow(0 -2px 0 0 darken($color-link, 20%) inset);

    &:hover {
        background-color: darken($color-link, 5%);
    }
}

.btn-secondary {
    background-color: $color-2;

    color: #fff;

    border-color: darken($color-2, 20%);

    @include box-shadow(0 -2px 0 0 darken($color-2, 20%) inset);

    &:hover {
        background-color: darken($color-2, 5%);
    }
}

使用的技巧有

  1. 利用box-shadow來製造陰影效果
  2. box-shadow的顏色使用compass的darken函式來完成。使用方法是darken($color-2, 5%),第一個參數是要跟黑色混和的顏色,第二個參數是要混和的比例。

完成畫面