TIL - 220504

• SCSS 사용 이유 ?
  CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등 디자인 요소를 추가할 때 사용하는 전처리 과정. 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS.
  SCSS는 중첩, 변수 선언, 연산자 등 많은 장점을 가짐.

  • 변수 사용법

    $color: #ed5b46;
    $borderRadius: 5px;
    div {
      background-color: $color;
      border-radius: $borderRadius;
    }

  • 상위 선택자 사용 : Ampersand (상위 선택자 참조)
    중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환.

    .fs {
    &-small { font-size: 12px; }
    &-medium { font-size: 14px; }
    &-large { font-size: 16px; }
    }
    // 컴파일시..
    .fs-small {
    font-size: 12px;
    }
    .fs-medium {
    font-size: 14px;
    }
    .fs-large {
    font-size: 16px;
    }

  • 중첩에서 벗어나기 : @at-root (중첩 벗어나기)

    .list {
      $w: 100px;
      $h: 50px;
      li {
        width: $w;
        height: $h;
      }
      @at-root .box {
        width: $w;
        height: $h;
      }
    }
    //컴파일시...
    .list li {
      width: 100px;
      height: 50px;
    }
    .box {
      width: 100px;
      height: 50px;
    }

• Sass vs SCSS 차이점 ?
  Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset).
  즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

• 참고블로그 :
  SCSS 완전정복
  SCSS 사용하는 이유, SCSS 장점과 실 사용 예제

• CSS를 이용한 : progress bar 만들기

// js
<div className={styles.bar} />
  
// css
.bar{
    width: 100%;
    height:3px;
    background-color: colors.$GRAYE;
    &:before {
      content: '';
      display: block;
      width: 100px;
      height: 3px;
      background-color: red;
    }
  }