SASS 🎨

sass는 css 전 처리기 입니다. sass 문법이 css로 변환해주는 것!
nesting, mixin, 변수 를 이용해 스타일시트의 유지보수와 가독성을 좋게 만들어 줍니다.

설치방법

npm install sass --save

--save 를 적는이유는 package.json 설치된 패키지와 정보를 업데이트 해줍니다.

1️⃣ .css ➡️ .scss 확장자 변경

sass를 설치 후 사용하기 위해서는 기존의 css확장자를 .scss로 변경해야 합니다. 또한 js파일에서 import 했던 css까지 .scss로 변경해야 합니다.

2️⃣ nesting

sass의 특별한 기능 중 하나인 Nesting( 네스팅 ) 은 부모요소와 자식요소를 시각적으로 구분해 가독성을 높이면서 자식요소는 부모요소에 속해있어 다른 부모요소들과 겹치지 않아 스타일이 충돌되는 것을 방지해준다.

//모두 comment 라는 부모요소의 자식이다.
//scss nesting (네스팅)

.comment {
  .commentNameBold {
    font-weight: bold;

    .commentMargin {
      font-weight: normal;
    }
  }

  .heart {
    width: 15px;
    cursor: pointer;
  }

  .heartColor {
    display: none;
    width: 15px;
    cursor: pointer;
  }
  .commentText {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
  }
  .commentNameBold {
    margin-right: 5px;
  }
}

3️⃣ mixin

mixin 을 사용하면 매 번 길게 적어야 되는 속성을 한 줄에 적는 것도 가능하다!

@mixin logoText($logoText: 50px) {
  font-family: 'Lobster', cursive;
  font-size: $logoText;
}

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

위 처럼 mixin으로 다양한 속성을 하나의 변수로 처리한다고 보면 된다.

// @mixin logoText($logoText: 50px)
// mixin을 사용하고 폰트크기를 변수처리 하는 것도 가능하다.

.navContainer {
    @include flexBetween;
    width: 935px;
    
    .logo {
    @include logoText($logoText: 22px);
    margin-left: 25px;
  }
}

@include를 입력하고 뒤에 mixin으로 설정한 변수를 적으면 스타일이 적용된다!

4️⃣ 변수

mixin과 비슷하지만 다른 $를 이용해 변수를 만들 수 있다.
예를 들어 $border-radius: 5px; 이 값은 어떤 스타일에서 이 변수명을 적으면 5px이라는 값을 만든다.

$border-radius: 5px;

    .userIdInput {
      width: 215px;
      padding: 5px 0;
      border: 1px solid rgb(219, 219, 219);
      border-radius: $border-radius;
		
      //border-radius: 5px을 가진다

      &::placeholder {
        color: #c7c7c7;
        background-size: contain;
        background-position: 35%;
        background-repeat: no-repeat;
        text-align: center;
      }

scss에서 연산자 & 의 역할은 추가 스타일 속성을 부여 해 줄 수 있다.
ex) &:hover , &::placeholder