SCSS STUDY 👨🏻‍🏫

본 글은 FastCampus 강의를 듣고 정리하기 위해 쓴 글입니다. :]

SCSS 🧙🏼‍♂️

다들 한번쯤은 들어보고 다들 대충 CSS의 유지보수와 편리함 가독성을 좋게 만들어준다고 알고있다. 이러한 SCSS에 대해 공부한 것을 정리 해보려고 한다!!

그리고 아래의 링크에 아주 잘 정리 되어있다.

https://heropy.blog/2018/01/31/sass/

주석 ✍🏻

// <== 이 주석은 SCSS => CSS로 compile할 때 compiled된 css file에서 보이지 않음.

/**/ <== 이 주석은 위와 반대로 compile할 때
compiled된 css file에서 주석처리 된 형태로 확인 가능

변수 ✍🏻

$variable <= 달러 표시를 붙여주면 사용 가능하다.

$color: blue;

.container {
  h1 {
    color: $color;
  }
}

자식 선택자 ✍🏻

">" 를 사용하면 자식 선택자로 사용 가능하다.

.container {
  > ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: rosybrown;
      }
    } // li
  } // ul
} // container

상위 선택자 참조 ✍🏻

"&" 를 사용하여 표현할 수 있다.

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-left: 0;
    }
  }
}

위의 코드를 complied 된 css file로 확인하면

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

.list li:last-child {
  margin-left: 0;
}

의 css 코드처럼 자신이 포함된 상위 선택자를 참조하고,
아래의 코드와 같이 편리하게 사용 할 수도 있다.

.fs {
  &-small { font-size: 10px;};
  &-medium { font-size: 10px;};
  &-large { font-size: 10px;}
}