css-레일스 프로젝트에서 scss 파일로 클래스명명, 반복된 코드줄이기

CSS

: 레일스 프로젝트에서 scss 파일적용으로 클래스명명, 반복된 코드줄이기

>css파일을 적용하다보면, 명명규칙이나, 다른 뷰파일에 같은 css가 적용되는등의 문제점들이 많이 발생하게된다. 이를 해결하기 위한것이, scss이고 레일스는 scss를 프로젝트를 만들면 뷰파일에관한 스타일링을 scss로 기본으로 제공하기 때문에 레일스 프로젝트에서 scss파일 적용하기를 활용해보자.

       <div class="card">
         <img class="card-img-top" src="/assets/img/download.png" alt="Card image cap">
         <div class="card-body overlay">
           <h5 class="card-title">이승규</h5>
           <p class="card-text">컴퓨터공학과 15</p>
           <div class="card-slogan">
             <p>"쌰럽. 펔유"</p>
           </div>
         </div>
       </div>

-home/index.html.erb

.var-highlight{
    color: #C0AD60;
    font-family: 'courier new';
​
}
.string-highlight{
    color: rgba(253, 149, 90, 0.8);
    font-family: courier;
}
​
.blq {
    border-color: black;
}
​
blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #ee6e73;
}
​
.typestyle {
  width: 1000px;
  margin: auto;
  justify-content: center!important;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
​
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0rem!important;
}
​
​
.card-img-top {
  display: block;
  width: 100%;
  height: auto;
}
​
.card:hover .overlay {
  width: 100%;
}
​
p.card-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  white-space: nowrap;
}
​
h5.card-title{
  color: white;
  font-size: 20px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  white-space: nowrap;
}
​
.card-slogan {
  font-size: 20px;
}

-stylesheets/home.scss

리팩토링을 하기전, 위의 html파일과 scss파일을 보면,<div class="card-body overlay"> 와 같이, html 상에서,클래스를 중첩하여 쓰거나, scss파일 역시도, 가독성이 좋지못한 코드들이 많고, 순서도 뒤죽박죽으로 scss파일이 짜여있고, 다른 뷰파일에서도 때문에 같은 스타일이 적용될 가능성이 매우 많았다. 이를 해결하기 위해 scss를 활용해보자.

//가장 상위를 home으로 묶음으로써, 다른컨트롤러의 뷰파일과 겹치는 것을 방지한다.
.home{
  &-blq {
      border-color: black;
  }
  &-logo {
    display: flex;
    height:100vh;
    min-height:400px;
    /* linear-gradient(방향, 시작점, 끝점)*/
    background-image: url('/assets/bg-header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  &-typestyle {
    width: 1000px;
    margin: auto;
    justify-content: center!important;
  }
  &-var-highlight{
      color: #C0AD60;
      font-family: 'courier new';
​
  }
  &-string-highlight{
      color: rgba(253, 149, 90, 0.8);
      font-family: courier;
  }
  &-page-heading {
    font-family: 'Open Sans', sans-serif;
    text-align: center!important;
  }
  //card 로 다시묶어줌으로써, 반복된 코드를 줄이고 가독성을 높여준다.
  &-card{
    &:hover .overlay{
      width: 100%;
    }
    &-body {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0rem!important;
        @extend .overlay;
    }
    &-img-top {
      display: block;
      width: 100%;
      height: auto;
    }
    &-slogan {
      font-size: 20px;
    }
    &-text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      white-space: nowrap;
    }
    &-title{
      color: white;
      font-size: 20px;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      white-space: nowrap;
    }
  }
​
​
}
​
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
​
}
​
#typewriter{
          color: white;
          font-size: 2em;
          margin: 0;
          font-family: "Courier New";
​
          &:after{
              content: "|";
              animation: blink 500ms linear infinite alternate;
          }
}
​
blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #ee6e73;
}
​

.home 으로 scss파일을 다른 파일들과 구분하여 어떤 뷰에 적용될것인지 명시해주고,

&- 클래스명{

}

과 같은 패턴으로, 반복된 코드를 줄이고, scss를 가독성있게 만들어 주었다. 위와 같은 패턴으로 scss파일을 작성하면, 클래스 명명이나, 다른 뷰파일에서 다른 css가 적용되는것을 막을수있게되는것이다.
>다른 뷰파일에도 같은 패턴 적용하기
-stylesheets
  -application.scss (프로젝트 전체에 적용되는 scss 파일)  -custom.scss (부트스트랩 테마를 overwrite 할때쓰는 scss파일)  -home.scss (home 컨트롤러 뷰 관련 scss파일)  -posts.scsss (post 컨트롤러 뷰 관련 scss파일)  -team.scss (team 컨트롤러 뷰 관련 scss파일)  -user.scss (user 컨트롤러 뷰 관련 scss파일)

scss파일 작성규칙
 .컨트롤러명 {  & - example{
  }}

ex) application.scss

.app{
   &-template{
     margin: 10rem 5rem;
   }
   &-user:link{
     color:white;
   }
   &-bg-gray-dark {
     background-color: #eceeef;
   }
   &-bg-light-yellow {
     background-color: rgba(255,193,7,0.7);
   }
   &-user{
     color:white;
   }
   &-brand {
     margin: 0;
     font-family: 'Kopub Batang', serif;
     font-size: 1.33333333rem;
     font-weight: 400;
     line-height: 1;
     a {
       font-family: inherit;
     }
   }

위에서 아래부분에 해당하는 부분을 살펴보면 아래와 같이 scss파일이 작성되어있는것을 확인할 수있다.

&-app{
  ...
    &-brand {
     margin: 0;
     font-family: 'Kopub Batang', serif;
     font-size: 1.33333333rem;
     font-weight: 400;
     line-height: 1;
     a {
       font-family: inherit;
     }
  }

예전 css코드였더라면 아래와 같이 반복적인 코드들이 등장하고, 가독성 역시 좋지 않았을 것이며, 다른뷰파일에서도 css가 적용될 가능성도 있었을 것이다.

.app{}
...
​
.app-brand{}
...
​
.app-brand a{}