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

    좋은 웹페이지 즐겨찾기