Sass 模組開發

最近社群上有人分享了一個連結，是關於sass模組製作的教學，大致看了一下，發現和我的方式頗為接近，所以就在這介紹我的Sass模組開發方式。

http://www.sitepoint.com/sass-component-10-minutes/

本篇重點

以按鈕模組為例，示範Sass模組開發。

效果展示

<a href="#" class="demo-btn">demo-btn</a>
<a href="#" class="demo-btn Validation">demo-btn Validation</a>
<a href="#" class="demo-btn Error">demo-btn Error</a>
<a href="#" class="demo-btn Warning">demo-btn Warning</a>
<a href="#" class="demo-btn Information">demo-btn Information</a>

以上是分為兩組的範例，上面那一組是模組預設值，而下方這組是透過變數以及@each來快速產生，透過這個方式，可以有效的管理CSS程式碼，以及增加開發速度。

模組開發流程

首先，分為兩個部分，一個是共通的屬性，另一部份是可變動的屬性；共通部分就是基本的格式，也是模組最基礎的屬性，
可變動的可以如顏色、大小、對齊方式等等，而本篇則是用顏色。

建立@extend 及@mixin

@extend就是模組的共通屬性，如果不清楚的，可以和下方的@mixin一起參考。

%buttonDemo
    color: #fff
    text-decoration: none
    padding: .3em 1em
    display: inline-block
    text-align: center
    vertical-align: middle
    cursor: pointer
    text-shadow: -1px -1px 0 rgba(00,00,00,0.3)
    +border-radius(3px)
    +box-sizing(border-box)
    +box-shadow(inset 0 .1em 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, 0.05))
    +transition(box-shadow .2s)        
    &:hover
        +box-shadow(inset 0 .1em .3em rgba(0, 0, 0, .3),0 1px 2px rgba(0, 0, 0, 0.05))
        color: #fff
    &:focus,&:active,&.current
        +box-shadow(inset 0 .1em .6em rgba(0, 0, 0, .4),0 1px 2px rgba(0, 0, 0, 0.05))

@mixin就是一個基本的模組，將顏色屬性先挑選出來，再透過Sass的運算可以產生許多樣式，而@extend可以避免CSS檔產生過多不必要的程式碼。

$defaultColor: #107FC9 //預設色彩

@mixin buttonDemo($className: btn-default,$color: $defaultColor)
    $darkenColor:  saturate(darken($color, 10%),15%)
    $lightenColor: saturate($color, 2%)
    .#{$className}
        @extend %buttonDemo
        border: 1px solid $darkenColor
        background-color: $lightenColor
        margin: 1px
        &:hover,&.current
            background-color: $darkenColor

到這部分就有一個基本的按鈕樣式。

利用@each 大量製作

+buttonDemo(.demo-btn.Validation, #5cb85c)
+buttonDemo(.demo-btn.Error, #d9534f)
+buttonDemo(.demo-btn.Warning, #f0ad4e)
+buttonDemo(.demo-btn.Information, #5bc0de)

到了這部分，其實我們可以利用上面的方式來產生多樣模組，但其實.Validation以及後方的色彩#5cb85c都是可以重複使用的，如果我們利用$each，除了在這一個模組會更好管理外，還可以用來製作其他模組。

首先，先定義基本的class名稱及色彩。參考

$button-types: (Validation, #5cb85c) (Error, #d9534f) (Warning, #f0ad4e) (Information, #5bc0de)

製作一個新的@mixin，利用$each將每一個class名稱及色彩套用至buttonDemo這一個@mixin內。

@mixin DemoButtons($prefix: demo-btn)
    +buttonDemo($prefix, $defaultColor) //載入預設的樣式
    @each $button-type in $button-types
        $thisClass: nth($button-type, 1)
        $thisColor: nth($button-type, 2)
        $thisallClass: $prefix+"."+$thisClass
        +buttonDemo($thisallClass, $thisColor)

+DemoButtons()

用這方式就可以完成sass模組，且包含了許多樣式。而這模組的架構，是我目前在測試的，有興趣的可以參考就好，畢竟CSS寫法相當多樣，只有適合沒有完美的寫法，下方另外提供codepen範例。