五倍直播間

Blogs - Sidebar


# Designing Case Study: Ruby x Elixir Conf Taiwan 2018

一年一度的 Ruby Conf Taiwan 今年邁入第七屆，這次 Ruby Taiwan 特別和 Elixir Taiwan 合作，共同推出史無前例的雙程式語言研討會 [Ruby x Elixir Conf Taiwan 2018](https://2018.rubyconf.tw/)，於今年 4/28 圓滿落幕 🎉

![Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*i4ia5oJIXzx_ewsBngb2CA.png)

本次研討會，超過 250 位會眾熱情參與，來自世界各地的講者與開發者齊聚一堂，一同共襄盛舉。活動酬備期長達半年以上，在設計方面更面臨 Ruby 與 Elixir 雙程式語言的挑戰 💪🏻

這次設計的主軸為「交流」，期盼讓 Ruby 和 Elixr 能獨立發揮又能互相激盪。雖然一行又一行的程式碼難以用視覺來理解，所幸許多程式語言都各自擁有代表的圖像，如代表 Ruby 的「紅寶石」與象徵 Elixir 的「煉金藥水」。

然而，一剛一柔的組合卻也讓 Logo 的設計一度卡關。曾經嘗試將流動的藥水裝進寶石形狀的瓶子裡，不僅導致 Elixir 變成 Ruby 的一部分，且融合的意象遠大過交流的目標。

![Logo 設計第一次提案](https://cdn-images-1.medium.com/max/1600/1*YDk2zYnjdB0oRcmPj8RC9Q.jpeg)

為了讓兩者達到完美的平衡，在後續的修正上盡可能讓紅寶石與煉金藥水各自獨立、互不干擾，卻又能站在同一個舞台上。經過一番研究，最終以「沙漏」的意象巧妙地將兩者連結 —— 紅寶石上寬下窄的形狀恰巧符合沙漏的上半部，而水滴狀的煉金藥水自然地成為沙漏的下半部。將兩者放在一個 8 形的瓶子裡，為 2018 的 Ruby x Elixir Conf Taiwan 展開序幕。

![Logo Design for Ruby x Elixir Conf Taiwan 2018](https://cdn-images-1.medium.com/max/2000/1*qvNraTSHBjzj60emOp6gaA.png)

這次選用的字體為 Google Fonts 提供的 [Righteous](https://fonts.google.com/specimen/Righteous)。[Righteous](https://fonts.google.com/specimen/Righteous) 的設計靈感來自匈牙利籍藝術家 Róbert Berény 的作品，其海報具有濃烈的 Art Deco 風格。因此，[Righteous](https://fonts.google.com/specimen/Righteous) 同樣採用嚴謹的幾何手法繪製而成，使其在工業風格中保有一定的藝術性。此外，大小寫字體完備的特性使之成為標準字的不二人選，為這次的研討會增添不少俏皮感。

![Righteous — Google Fonts](https://cdn-images-1.medium.com/max/2000/1*yktq2yn3iEpq9kS1yCIFSg.png)

顏色漸層在扁平化設計（Flat Design）盛行的時候沉寂一時，直到最近捲土重來，帶動一波新的網頁設計趨勢。因此，這次的 Ruby x Elixir Conf Taiwan 2018 更不能錯過這股浪潮，以 Ruby 代表的紅色融合 Elixir 代表的紫色，從 Logo 、網站到各式印刷品，廣泛且大膽地運用。

漸層不僅能提升物件的層次、擺脫生硬的感覺，好的漸層配色也能幫助整體風格更加活潑。這次選用飽和的紅紫漸層做為主色，展現熱情又神秘的感覺，令人不禁想一探究竟 — — 究竟今年的 Ruby x Elixir Conf Taiwan 2018 有什麼驚喜等著大家呢？

![Ruby x Elixir Conf Taiwan 2018 Official Website](https://cdn-images-1.medium.com/max/2000/1*FG2y7vyxXqaVUeGfiOUVOQ.png)

以往在活動頁面的架構上多採用單頁式設計，眾多的講者、豐富的議程與踴躍的贊助商常常導致頁面過長，不利閱讀。因此，這次改採多頁式設計，將議程（Program）、講者（Speakers）與贊助商（Sponsors）獨立出來，讓資訊能更清楚地呈現在頁面上，幫助使用者更有效地導覽。

網頁配色以紅紫漸層搭配白色背景，輔以幾何色塊和線條元素，展現年輕有活力的風格。首頁特別選用具有台北特色的三張照片 —— 著名的[台北 101](https://unsplash.com/photos/TZldfnLPZ3Q)、繁忙的[台北車站](https://unsplash.com/photos/MjyWAe-xYm8)與熱鬧的[夜市](https://unsplash.com/photos/j6uw8AE3sx0)，來歡迎眾多遠道而來的外國朋友。

![Events & Parities](https://cdn-images-1.medium.com/max/1000/1*J67WJmCwawm-4TQqDsWWdg.png)

此外，本次研討會也有許多衍伸的活動與 Party。為了讓會眾更有參與感，特別將連結設計成票卷的形式。科技帶來方便，設計更不能因此馬虎！

![Sketch App](https://cdn-images-1.medium.com/max/1000/1*WETSRBb5nCs6wfJKY0Nx5Q.png)

技術方面，[Sketch](https://www.sketchapp.com/) 已經成為我目前最仰賴的工具。簡單的操作介面、模組化的 Symbol 功能，還有眾多好用的 Plugin，讓我能夠在短時間內快速產出不同裝置的設計圖稿。搭配 [Zeplin](https://zeplin.io/) 一起服用，更能大幅提升開發效率 ⚡️

> Happy Design, Happy Coding :-)

-----------------

[Designing Case Study: Ruby x Elixir Conf Taiwan 2018 @ Medium](https://medium.com/@irene84111/designing-case-study-ruby-x-elixir-conf-taiwan-2018-af17060f7da8)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

post-Designing Case Study: Ruby x Elixir Conf Taiwan 2018/cover

Designing Case Study: Ruby x Elixir Conf Taiwan 2018

post-《Growing Rails Applications in Practice》 重點整理 / cover

《Growing Rails Applications in Practice》 重點整理

## Source
`https://github.com/aasm/aasm`

## 說明
### 定義 state and event
首先需要有狀態，以及事件。事件為從 A 狀態轉變到 B 狀態。

 aasm do
 state :sleeping, :initial => true
 state :running, :cleaning

 event :run do
 transitions :from => :sleeping, :to => :running
 end

 event :clean do
 transitions :from => :running, :to => :cleaning
 end

 event :sleep do
 transitions :from => [:running, :cleaning], :to => :sleeping
 end
 end

### 然後
```ruby
job = Job.new
job.sleeping? # => true
job.may_run? # => true
job.run
job.running? # => true
job.sleeping? # => false
job.may_run? # => false
job.run # => raises AASM::InvalidTransition
```

如果希望他不要跳其他訊息，只要 `true` `false` 就好的話可以用 `:whiny_transitions => false`

 aasm :whiny_transitions => false do
 ...
 end

那麼

```ruby
job.may_run? # => false
job.run # => false（這裡就不會有錯誤訊息了）
```

也可以在 event 上加 block

 job.run do
 job.user.notify_job_ran
 end

這樣在 `job.run` 成功之後就會再執行 `job.user.notify_job_ran` 了

### Callback
你可以為 transitions 設一些 callback，像是 `after`，下面這個範例在執行完 `run` 之後就可以去做 `notify_somebody`。

 class Job
 include AASM

 aasm do
 state :sleeping, :initial => true, :before_enter => :do_something
 state :running
 state :finished

 event :run, :after => :notify_somebody do
 transitions :from => :sleeping, :to => :running, :after => Proc.new {|*args| set_process(*args) }
 transitions :from => :running, :to => :finished, :after => LogRunTime
 end
 end

 def notify_somebody
 ...
 end
 end

### Transitions
一個 event 裡可以有不只一個 transitions，但是如果是從同一個狀態出發的第一個 transitions 成功之後，後面的 transitions 就不會再執行了

### Guards
如果符合 `guard` 裡的條件才做這個 transitions，所以可以用來區隔同一個狀態根據不同過程會到不一樣的下一個狀態。

 aasm_event :completes do
 transitions :from => sleeping, :to => :running, :guard => condition?
 transitions :from => sleeping, :to => :cleaning
 end

 def condition?
 some_contition
 end

### Bang events
* 有無 `!` 的差別： 

```ruby
job.run # not saved，只是回傳告知是否可以做這個動作
job.run! # saved
```

* 不做驗證

```
aasm :skip_validation_on_save => true do
 state :sleeping, :initial => true
 state :running

 event :run do
 transitions :from => :sleeping, :to => :running
 end

 event :sleep do
 transitions :from => :running, :to => :sleeping
 end
end
```

* 不能直接改變狀態

```
aasm :no_direct_assignment => true do
 state :sleeping, :initial => true
 state :running

 event :run do
 transitions :from => :sleeping, :to => :running
 end
end
```

那麼

```ruby
job.aasm_state # => 'sleeping'
job.aasm_state = :running # => raises AASM::NoDirectAssignmentError
↑ 這裡無法直接將狀態改變
job.aasm_state # => 'sleeping'
```

### Column name
AASM 預設用 `aasm_state` 去存 state，但是可以透過 override 的方式指定你想要用的 cloumn

 class Job < ActiveRecord::Base
 include AASM

 aasm :column => 'my_state' do
 ...
 end
 end

## 使用
### 說明
商城舉辦活動 (Activity)，活動中顧客會成立訂單 (Order)，而訂單中有商品 (Item)
這時就可以使用 AASM 來管理這三樣東西的狀態！

活動 (Activity) 有 active/inactive/pending 三種狀態。 
訂單 (Order) 有 pending/inprogress/completed/deleted 四種狀態。 
商品 (Item) 有 active/inactive/pending 三種狀態。

狀態情境：

1. 如果活動開始，就要將 Activity 調成 active。 
2. 客戶必須在活動期間內才能成立訂單。 
3. 訂單中的商品必須是可以訂購 (active) 的狀態。 
4. 商品被訂購後須確認是否還有庫存，若無，要將狀態調為 inactive。 

model/activity.rb

 class Activity < ApplicationRecord
 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :active
 state :inactive

 event :activate do
 transitions :from => [:pending, :inactive], :to => :active
 end

 event :deactivate do
 transitions :from => :active, :to => :inactive
 end
 end
 end

model/order.rb

 class Order < ApplicationRecord
 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :inprogress
 state :completed
 state :deleted

 event :placed, :after_commit => :deactivate_item do
 transitions :from => :pending, :to => :inprogress do
 guard do
 activity.active? and item.active?
 end
 end
 end
 end

 def deactivate_item
 if item.count = 0
 item.deactivate!
 end
 end
 end

model/item.rb

 include AASM
 aasm whiny_transitions: false, column: :state do
 state :pending, initial: true
 state :active
 state :inactive

 event :activate do
 transitions :from => [:pending, :inactive], :to => :active
 end

 event :deactivate do
 transitions :from => :active, :to => :inactive
 end
 end

### 操作
#### `$ activity.activate!`

於是，活動就開始啦！我們的條件一也就完成啦！

接著，客戶建立了一筆訂單。那麼在 `order.placed!` 裡有

 guard do
 activity.active? and item.active?
 end

是要確保這個目前活動進行中 (也就是 Activity 狀態為 active )，以及客戶所訂購的商品有庫存 (也就是 Item 狀態為 active )。條件都符合時才能執行 `order.placed!`

並且，在 `order.placed!` 後有 after_commit ，所以如果成功執行 `order.placed!` ，將 Order 的狀態改為 inprogress 的話，就會執行 `deactivate_item` 這個 method。如果檢查確認 Item 數量已為 0，那麼就會 `item.deactivate!`

所以，條件二三四也都完成啦！

## 結語
介紹與簡易的 AASM 實作就這樣啦，有這些 transcation 就不用擔心在各個 model state會互相影響的複雜狀態下，調整了 A model 卻忘記調 B model 等等的狀況啦。

---

> 👩‍🏫 __課務小幫手：__
> 
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>

post-狀態機初學到實作：認識 AASM / cover

狀態機初學到實作：認識 AASM


# 在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

## 1. 安裝 Nginx

推薦使用 Homebrew 在 Mac 上安裝 Nginx：

```bash
brew install nginx
```

安裝完成後，就能用 brew services 來幫我們啟動 Nginx：

```bash
sudo brew services start nginx
```

## 2. 設定 Nginx

用慣用的編輯器打開 `/usr/local/etc/nginx/nginx.conf`，然後確認裡面有 `include servers/*.conf;` 這行。（通常會在最後一行，把前面的 `#` 註解符號拿掉就可以了）

## 3. 安裝 DNS Server

雖然透過編輯 `/etc/hosts` 也能達到類似的效果，但個人覺得這個檔在 Mac 上還是把這個檔交給系統控制就好，所以自己的習慣是在電腦上架個 DNS Server，然後在網路設定使用電腦上的 DNS Server 就好。

用以下指令可以安裝並啟動 dnsmasq：

```
brew install dnsmasq
sudo brew services start dnsmasq
```

## 4. 設定 DNS Server

同樣的，打開 `/usr/local/etc/dnsmasq.conf` 並且確認有這行：

```
conf-dir=/usr/local/etc/dnsmasq.d/,*.conf
```

（也通常會寫在最後一行，把前面的 `#` 註解符號拿掉就可以了）

然後，建立 `/usr/local/etc/dnsmasq.d/localhost.conf` 這個檔案，在裡面寫：

```
address=/localhost/127.0.0.1
```

> 也就是把所有 `*.localhost` 的網址解析到 `127.0.0.1` 的意思。

存擋後，執行 `sudo brew services reload dnsmasq` 來重載 dnsmasq 的設定。

> 如果要測試 dnsmasq 有沒有正確設定，可以執行 `nslookup test.localhost 127.0.0.1`，應該要得到 IP 是 `127.0.0.1` 的結果。

再來就是在系統的網路設定，把 127.0.0.1 加成其中一個 DNS server：

![](https://i.imgur.com/nuEbnTK.png)

注意除了 127.0.0.1 之外，裡面一定要有一個一般的 DNS server，不然其他公開的轉就會連不上去了。

> 要測試系統的 DNS server 有沒有設定好，可以在瀏覽器前往 `http://test.localhost`，應該要看到 `ERR_CONNECTION_REFUSED` 型而非 `ERR_NAME_NOT_RESOLVED` 的錯誤。

## 5. 簽署憑證與建立 Proxy 網站

為了方便執行這個步驟，我把需要做的事寫成了[一個 shell script](https://github.com/zetavg/dotfiles/blob/master/_bin/create-nginx-port-forwarding-localhost-server)。如果要為一個 Rails 網站、使用預設的 port 3000 開個新 server 的話，只要在專案目錄下執行：

```
create-nginx-port-forwarding-localhost-server site-name 3000 "$(pwd)/public"
```

就會建立提供 SSL + HTTP/2 的 `site-name.localhost` Nginx Virtual Host。用 `rails server` 啟動 Rails 之後，就可以在瀏覽器中用 `https://site-name.localhost` 來測試自己的網站了！

## 小結

雖然目前這套作法持續被我愉快使用中，不過還是有一些延伸應用需要找時間研究，例如：

- 如何設定 dnsmasq 來針對不同裝置回覆不同結果？例如自己的電腦要回 127.0.0.1，其他裝置就回目前電腦在區域網路下的 IP，這樣使用手機測試網站時，只要在手機改個 DNS 設定就方便了。
- 如果是開發 iOS 應用的話，iOS Simulator 預設會沿用電腦的網路設定，而且 127.0.0.1 也是指向實體裝置，所以在 Safari 下可以無痛地使用 `*.localhost` 網址。但是 native app 似乎就完全無動於衷了，似乎改 iOS 系統的 DNS 設定也沒有用，有點小困擾。
- Android Virtual Device 更麻煩一點，因為 AVD 系統中的 10.0.2.2 才是指向電腦的 127.0.0.1，所以無法只靠本篇的敘述就達成可以在 AVD 測試的目的。

也許最終極的作法是買個真實的 domain 搭配自架 reverse proxy，目前也還在研究中 XD


post-在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定/cover

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

post-Rails探索：Active Record篇 / cover

Rails 探索：Active Record 篇

post-寫隻 rake 讓你一行指令輕鬆跑報表-cover

寫隻 rake 讓你一行指令輕鬆跑報表


[上一篇文章](https://blog.frost.tw/posts/2017/10/22/The-ruby-s-class-is-free-Part-1/)已經討論過關於 Ruby 中的類別是怎樣運作的，這篇文章則會來討論如何拓展 Ruby 類別。

大部分的人寫 Ruby 有很大的原因是因為 Rails 但是上面像是 `has_many` 跟 `before_action` 這些可以直接在類別上做的事情，很明顯不是 Ruby 內建的，到底是怎麼運作的呢？

## Class Method

我們先來看一段範例

```ruby
class A
  def self.my_name_is(str)
     puts str
  end

 my_name_is 'A'
end
```

到這邊，大家可能已經猜到 `has_many` 這類 DSL 擴充是怎麼實做出來的。只是，背後的運作原理是什麼？

## Class Eval

上一篇文章我們有提到，下面兩段程式碼會是等價的。

```ruby
A = Class.new do
 # ...
end

# 上下兩段都是相同意思

class A
  # ...
end
```

也因此推測出 `class A; end` 中間的那個區塊，其實是一個 Block。不過我們並沒有討論這個 Block 是怎麼被運行的。

在 Ruby 的 `Class` 類別說明上，針對 `Class.new` 有提到「If a block is given, it is passed the class object, and the block is evaluated in the context of this class using class_eval.」這一段文字。

簡單來說，就是中間這段 Block 是透過 `class_eval` 方法來執行的，所以我們可以再繼續推導出以下的行為。

```ruby
A = Class.new do
 attr_accessor :name
end
```

相等於

```ruby
class A; end
A.class_eval { attr_accessor :name }
```

## Instance Method of Class

至於 `attr_accessor` 實際上是 `Class` 類別的實例方法。

```ruby
Class.instance_methods.include?(:attr_accessor)
# => false
```

怎麼會沒有？實際上 `Class` 類別已經 `include` 了 `Module`，而 `attr_accessor` 其實是 `Module` 類別的實例方法。

```ruby
Module.private_instance_methods.include?(:attr_accessor)
# => true
```

其實我們在 `Class` 上用 `private_instance_methods` 也可以找到 `attr_accessor` 這個方法，不過這其實是我們思考上的漏洞。因為 `attr_accessor` 是私有方法，所以我們沒辦法直接在 `instance_methods` 取得。

## DSL in Class

回到正題，關於 `has_many` 是如何定義的？

既然我們已經知道：

* 所有類別都是 `Class` 的實例
* 定義類別呼叫的是父類別的實例方法

這樣回到第一個範例的程式

```ruby
class A
  def self.my_name_is(str)
    puts str
  end
end
```

實際上是在定義類別 `A` 的時候， 同時對叫做 `A` 的類別 `Class` 物件實例，動態的追加 `my_name_is` 這個方法。也因此能夠讓 `A` 類別在進行 `class_eval` 的時候，提供 `my_name_is` 這個方法。

## 結論

每一種語言都有其特別的地方，在討論 DSL 的時候 Ruby 也經常會被拿出來討論。主要就是因為 Ruby 擁有這樣的性質，讓我們能夠動態的去定義類別和物件上的行為，進而讓實現 DSL 變的相對的容易。

雖然是一些相對冷門的知識，不過在必要的時候善用這些技巧可以幫助你用更優雅的方式去寫程式。

原文刊載於[弦而時習之
](https://blog.frost.tw/posts/2018/03/23/The-ruby-s-object-is-free-Part-2/)

---

>  👩‍🏫  __課務小幫手：__
>  
> ✨ 想掌握 Ruby on Rails 觀念和原理嗎？
>
> 我們有開設 🏓 [Ruby on Rails 實戰課程](https://5xruby.tw/courses/ruby-on-rails) 課程唷 ❤️️
>


post-自由的 Ruby 類別（二）/ cover

自由的 Ruby 類別（二）

SASS (Syntactically Awesome Stylesheet) 是一種預處理語言 (pre-processing language)，透過 SASS 可以更有效、更結構化的產生 CSS，並有助於減少撰寫重複的樣式，讓你的 CSS 更易於維護。今天要跟大家分享的是 SASS 的 @mixin 與 @include。

SASS 提供兩種語法，分別是 SCSS (Sassy CSS)，以及 Indented，最大的差別在語法上 `{}`、`;`、`=` 的有無，以及前者的副檔名為 `.scss`，後者的副檔名為 `.sass`，筆者在文章內採用 SCSS 的語法來跟大家分享。

## 前置準備
範例中我們使用下列工具：

- 編輯器：Visual Studio Code (以下簡稱 VSCode)
- 安裝套件：Live Sass Compiler、Live Server

套件 Live Sass Compiler 安裝完成後，在 VSCode 的右下方有一個 `Watch Sass` 按鈕，他的功能是將我們撰寫好的 `.scss` 或 `.sass` 編譯過後產生 `.css`，我們在 html 裡要引入的就是這個被產生出來的 CSS 檔案。

當原來的 `Watch Sass` 按鈕變成 `Watching...` 的狀態時，我們還是可以繼續編輯 `.scss` 或 `.sass`，在編輯完成存檔的當下就會自動編譯並更新之前產生的 `.css`。
有關 `.min.css`、`Prefix` 的設定，可以參考 [Setting Docs](https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md) 的說明。

套件 Live Server 安裝完成後，在 VSCode 的右下方會出現 `Go Live` 按鈕，在我們編輯好 HTML 並確實引入 CSS 檔案，存檔後按下該按鈕，會自動在瀏覽器開啟網頁，顯示最新存檔後的畫面。(本篇著重在 SASS 的使用分享，所以先暫時略過畫面的部份囉)

## 什麼情況需要用到 @mixin、@include？

- 發現自己在 CSS 裡一直寫著重複的樣式。
- 網頁元件可以歸納出共同的特性時 (可能按鈕都有陰影、或是每個文章區塊都有邊框...等等)。
- 認為自己開發網頁 CSS 效率遇到瓶頸，欲尋更好的撰寫效率。

## 語法
### @mixin
- 以 `@mixin` 開頭，並自定義一個名稱，將需要重複使用的 CSS 放在 `{ }` 裡面。
- 定義好的 `@mixin` 是可以重複使用的。
- 可以在名稱後面加 `()`，放入參數、預設值做進階的使用。
- 參數名稱以 `$` 開頭。

```scss
  @mixin example_base {
    ... // 定義 CSS
  }

  @mixin example_advanced($parameter1, $parameter2) {
    ... // 定義 CSS
  }
```

### @include
- 搭配 `@mixin`，我們在 `@mixin` 定義好 CSS，再透過 `@include` 呼叫使用。
- 若定義的 `@mixin` 有設定參數，那麼在呼叫使用的時候，就要傳入相對應的引數。

```scss
  selector1 {
    @include example_base; // 呼叫使用在 @mixin 定義的 CSS
    ... // 這個 selector 的其他 CSS
  }

  selector2 {
    @include example_advanced(argument1, argument2); // 呼叫使用在 @mixin 定義的 CSS
    ... // 這個 selector 的其他 CSS
  }
```

## 範例一：基本用法
- 假設在網頁中，我們每個按鈕 `.button` 的樣式統一都是邊框加 5px 的圓角再加一點點陰影，每個 `.article` 要邊框加 5px 的圓角但不要陰影，每張圖片 `.image` 也都邊框加 5px 的圓角再加一點點陰影好了，這些 "邊框加 5px 圓角，或許再加一點點陰影" 的樣式，我們就可以把 CSS 拉出來做 `@mixin`，並在需要該樣式設定的時候使用 `@include`:

```scss
  @mixin rounded-border {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  @mixin shadow {
    box-shadow: 1px 2px 2px #666;
  }

  .article {
    @include rounded-border;
  }

  .button {
    @include rounded-border;
    @include shadow;
  }

  .image {
    @include rounded-border;
    @include shadow;
  }
```

- 編譯過後的 CSS 呈現如下：

```css
  .article {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  .button {
    border: 2px #333 solid;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 2px #666;
            box-shadow: 1px 2px 2px #666;
  }

  .image {
    border: 2px #333 solid;
    border-radius: 5px;
    -webkit-box-shadow: 1px 2px 2px #666;
            box-shadow: 1px 2px 2px #666;
  }
```

- 將統一的樣式抽出來寫成 @mixin 的好處是，如果該樣式需要做調整的話，那麼只需要改 @mixin 這一個地方就好了，不用再一個一個找(或搜尋)。
- Live Sass Compiler 可以設定 Prefix，在編譯過後的 CSS 會自動加上。

## 範例二：使用參數
- 假設在網頁中，我們有一個遮罩覆蓋的效果，在 `.avatar`、`.product-image` 這兩個 class 都需要用到它，差別在遮罩透明度不一樣，那麼我們可以在 SASS 檔案裡這樣寫：

```scss
  // 定義遮罩覆蓋的基本屬性
  @mixin cover($opacity_value) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: $opacity_value; // opacity 的值由傳進來的參數決定
  }

  .avatar {
    @include cover(0.9); // 呼叫的時候帶入數值
  }

  .product-image {
    @include cover(0.8); // 呼叫的時候帶入數值
  }
```

- 編譯過後的 CSS 呈現如下：

```css
  .avatar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.9;
  }

  .product-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.8;
  }
```

## 範例三：使用參數 + 預設值

- 定義 @mixin 時若有使用參數，在呼叫的時候必須要依序傳入相對應的引數。
- 以範例一的 rounded-border 再作延伸：

```scss
  /*
    在 rounded-border 這個 @mixin 定義中，我們"依序"使用三個參數，並給它預設值：
    1. $color: border 的顏色，預設為 #333
    2. $line_style: border 的線條樣式，預設為實線
    3. $radius: border-radius 預設為 5px
  */

  @mixin rounded-border($color: #333, $line_style: solid, $radius: 5px) {
    border: 2px $color $line_style;
    border-radius: $radius;
  }

  .article {
    // 全部套用預設值，可以不用加 ()
    @include rounded-border;
  }

  .button {
    /*依序帶入引數：
      $radius 使用預設值，因為是排序在最後一個，可以不用帶入引數
      只要依序帶入前面 $color、$line_style 的值即可*/
    @include rounded-border(#f00, dashed);
  }

  .image {
    /*依序帶入引數：
      $color 使用預設值，因為不是排序在最後一個，若略過它直接帶入第二個值會導致配對錯誤，因此後面帶入的引數必須指定參數名稱*/
    @include rounded-border($line_style: dashed, $radius: 3px);
  }

```

註解看起來好像很複雜？這邊有幾點要稍微留意一下：

1. @include 的時候必須要依序傳入相對應的引數，講白話就是："一個蘿蔔一個坑"，跳過前面的坑，就要指定後面坑的名字，這樣後面的蘿蔔才不會跳錯坑 XD
2. 參數如果一次用太多反而會造成不便，因為自己還要記清楚那些參數的順序、數量，所以在設計 @mixin 時，要考量到使用的彈性跟方便性哦～

- 編譯過後的 CSS 呈現如下：

```css
  .article {
    border: 2px #333 solid;
    border-radius: 5px;
  }

  .button {
    border: 2px #f00 dashed;
    border-radius: 5px;
  }

  .image {
    border: 2px #333 dashed;
    border-radius: 3px;
  }
```

## 結論

  SASS 讓 CSS 寫起來很像在寫程式，對於沒有程式基礎的使用者來說其實也不需要太擔心， `@mixin` 的主要用意就是整理會重複使用到的 CSS，需要它的時候就用 `@include` 把它 "召喚" 出來，需要修改這些大量重複的 CSS 時，只要修改定義的地方即可，不用再大費周章的到處修改(也省去很多複製貼上)，是不是變得更有效率呢？


技術文章

Designing Case Study: Ruby x Elixir Conf Taiwan 2018

《Growing Rails Applications in Practice》重點整理

狀態機初學到實作：認識 AASM

在 Mac 上使用 Nginx + SSL & HTTP/2 做網站開發的設定

Rails 探索：Active Record 篇

寫隻 rake 讓你一行指令輕鬆跑報表

自由的 Ruby 類別（二）

新手也可以輕鬆玩轉 SASS - @mixin and @include

訂閱文章