[Rails/SCSS] SCSS를 사용하여 코딩을 비약적으로 효율화
SCSS를 사용하여 코딩을 비약적으로 효율화
효율화하는 요령
코드 예
도쿄 메트로의 오픈 데이터에서 운전 상황을 호출하는 앱
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);
}
}
Reference
이 문제에 관하여([Rails/SCSS] SCSS를 사용하여 코딩을 비약적으로 효율화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tanakadaichi_1989/items/c9fba26019e60c4b4618텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)