Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

スクリーンショット 2018-02-02 5.19.17.png

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);
  }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away