Sass/Scss

- 코드스쿼드 두 번째 개인 프로젝트인 News-stand를 CSS 전처리기 Sass/Scss를 활용했다.

- 먼저 CSS 전처리기는 자신만의 특별한 syntax를 가지고 CSS 생성하며 중복 코드를 제거하고 재사용성을 높일 수 있다.

- 여기서는 Sass/Scss를 사용하면 여러 장점들이 있지만, 실제 프로젝트에서 사용한 부분들을 다루도록 하겠다.

믹스인(mixin)

- 믹스인(mixin)은 코드 블록을 만들어 재사용 가능한 스타일을 정의할 수 있는 기능이다.

- @mixin으로 선언하고 @include로 사용한다.

- 다음은 실제 프로젝트에서 font 스타일을 정의하는 믹스인(mixin)을 선언하고 사용한 코드이다.

/* mixin 선언 */
@mixin font($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

/* include로 선언한 mixin 사용 */
  .newsstand_header_date {
    @include font(1.6rem, 500);
  }
  
   .headline_press {
    @include font(1.4rem, 700);
  }
/* css로 작성하는 경우 */
  .newsstand_header_date {
    font-size: 1.6rem;
    font-weight: 500;
  }
  
  .headline_press {
    font-size: 1.4rem;
    font-weight: 700;
  }

- CSS로 작성할 때보다 믹스인(mixin)을 활용하여 parameter를 전달하여 재사용 가능한 스타일을 정의할 수 있었다.

중첩(nesing)사용

- Sass/Scss의 중첩 규칙을 사용하면 부모 요소를 반복해서 작성하지 않아도 되기 때문에 가독성 있는 코드를 작성할 수 있다.

- 다음은 실제 프로젝트에서 중첩 규칙을 사용한 코드와 중첩 규칙을 사용하지 않았을 때의 css의 코드이다.

/* 중첩 규칙을 사용 */
.newsstand_header {
  display: flex;
  justify-content: space-between;

  .newsstand_header_title {
    display: flex;
    width: 160px;

    a {
      cursor: pointer;

      .header_title_logo {
        width: 24px;
        height: 20px;
        margin-top: 5px;
      }

      .header_title_text {
        margin-left: 6px;
        @include font(1.6rem, 700);
      }
    }
  }

  .newsstand_header_date {
    margin-top: 3px;
    color: $gray500;
    @include font(1.6rem, 500);
    line-height: 3.2rem;
  }
}

/* 중첩 규칙을 미사용한 css */
.newsstand_header {
  display: flex;
  justify-content: space-between;
}

.newsstand_header_title {
  display: flex;
  width: 160px;
}

.newsstand_header_title a {
  cursor: pointer;
}

.newsstand_header_title a .header_title_logo {
  width: 24px;
  height: 20px;
  margin-top: 5px;
}

.newsstand_header_title a .header_title_text {
  margin-left: 6px;
  font-size: 1.6rem;
  font-weight: 700;
}

.newsstand_header_date {
  margin-top: 3px;
  color: $gray500;
  font-size: 1.6rem;
  font-weight: 500;
}

- 중첩 규칙을 사용했을 때, 부모 요소를 반복하지 않아도 되며, 가독성 좋은 코드를 작성할 수 있다.

배운 점

- Sass/Scss를 처음 접했고 익숙해지는데 시간이 필요했지만, 기본 CSS에 비해 Sass/Scss를 사용하는 장점에 대해서 알게 되었고, 화면에 보여지는 것이 전부가 아닌, 항상 더 나은 방향에 대해서 고민하고 방법을 찾는 습관을 가져야겠다.

---

참고 : https://velog.io/@jmlee9707/CS-CSS-scsssass%EC%9D%98-%EC%9E%A5%EC%A0%90-scss-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0-css%EC%99%80%EC%9D%98-%EC%B0%A8%EC%9D%B4