［Rails/SCSS］SCSSを使ってコーディングを飛躍的に効率化

SCSSを使ってコーディングを飛躍的に効率化

効率化するコツ

1. 定数を定義
2. mixinを定義
3. 配列を定義してループを回す

##コード例
東京メトロのオープンデータから運転状況を呼び出すアプリ
https://tokyometroapi-and-rubyonrails.herokuapp.com/

1.定数を定義 → 各路線別のラインカラー
2.mixinを定義 → 各路線の運転状況を表示するdivの構造は共通。それに反映させるmixinを定義
3.配列を定義してループを回す → ラインカラーを格納した配列を定義して、路線別に色を設定

HTML

sample.html.erb

<div class="container">
<div class="row">
  <div class="info ginza col-sm-4">
  <%= image_tag("G.jpg",class: "logo") %>
  <h3>銀座線</h3>
  <p><!--運転状況の表示--></p>
</div>

<div class="info marunouchi col-sm-4">
  <%= image_tag("M.jpg",class: "logo") %>
  <h3>丸ノ内線</h3>
  <p><!--運転状況の表示--></p>
</div>

<div class="info hibiya col-sm-4">
  <%= image_tag("H.jpg",class: "logo") %>
  <h3><!--運転状況の表示--></h3>
  <p></p>
</div>
</div>

<div class="row">
<div class="info tozai col-sm-4">
  <%= image_tag("T.jpg",class: "logo") %>
  <h3>東西線</h3>
  <p><!--運転状況の表示--></p>
</div>


<div class="info chiyoda col-sm-4">
  <%= image_tag("C.jpg",class: "logo") %>
  <h3>千代田線</h3>
  <p><!--運転状況の表示--></p>
</div>

<div class="info yurakucho col-sm-4">
  <%= image_tag("Y.jpg",class: "logo") %>
  <h3>有楽町線</h3>
  <p><!--運転状況の表示--></p>
</div>
</div>

<div class="row">
<div class="info hanzomon col-sm-4">
  <%= image_tag("Z.jpg",class: "logo") %>
  <h3>半蔵門線</h3>
  <p><!--運転状況の表示--></p>
</div>

<div class="info namboku col-sm-4">
  <%= image_tag("N.jpg",class: "logo") %>
  <h3>南北線</h3>
  <p><!--運転状況の表示--></p>
</div>

<div class="info fukutoshin col-sm-4">
  <%= image_tag("F.jpg",class: "logo") %>
  <h3>副都心線</h3>
  <p><!--運転状況の表示--></p>
</div>
</div>
</div>

SCSS

sample.scss

/* LINE COLORS */
$ginza:#FF9500;
$marunouchi:#F62E36;
$hibiya:#B5B5AC;
$tozai:#009BBF;
$chiyoda:#00BB85;
$yurakucho:#C1A470;
$hanzomon:#8F76D6;
$namboku:#00AC9B;
$fukutoshin:#9C5E31;


/* LINE COLORS ARRAY */
$line_colors:(
ginza:$ginza,
marunouchi:$marunouchi,
hibiya:$hibiya,
tozai:$tozai,
chiyoda:$chiyoda,
yurakucho:$yurakucho,
hanzomon:$hanzomon,
namboku:$namboku,
fukutoshin:$fukutoshin
);


//mixin
@mixin box($color){

height:auto;

background-color:white;
box-shadow:1px 1px 2px gray;
border-bottom:$color 3px solid;

img{
  width:20px;
  height:20px;
  position:absolute;
  top:11px;
}

h3{
  margin-top:10px;
  margin-left:30px;
  font-size:20px;
  font-weight:bolder;
}


.content{
  float:left;
  margin-top:10px;
}
}


//ラインカラーを各路線別に設定
@each $line,$color in $line_colors{
  .#{$line} {
    @include box($color);
  }
}