[Rails/SCSS] SCSS를 사용하여 코딩을 비약적으로 효율화

SCSS를 사용하여 코딩을 비약적으로 효율화

효율화하는 요령

상수 정의

mixin을 정의

배열을 정의하고 루프를 돌립니다

코드 예

도쿄 메트로의 오픈 데이터에서 운전 상황을 호출하는 앱
h tps : // 설탕 t 로아 피안 d 루 병 라이 ls. 어리석은 p. 코m/

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);
  }
}