scss

css의 한계

• css는 선택자(selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다
• 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다

장점

중첩, 변수 선언, 연산자 등 많은 장점을 가지고 있다

동적으로 CSS 관리

프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다

변수

변수를 지정해 놓고 바로 사용이 가능

• 프로젝트 내에 정해놓은 컬러를 사용함에 있어 오차를 줄여주고, 사용하는 개발자 입장에서 효율적으로 개발이 가능
• 디자인 컨셉 변경과 같이 대대적으로 변경할 때에도, 변수 선언 부만 수정하면 되니 유지보수성이 뛰어나다

$color: #ed5b46;
$borderRadius: 5px;

div {
	
    background-color: $color;
    border-radius: $borderRadius;
}

중첩

셀렉터, 속성을 중첩시키거나 상위 요소를 참조하는 것이 가능하다

label {

      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;

      &:hover {
        color: white;
        background-color: $color;
      }
}

복잡한 구조의 HTML에서는 각각 요소들에 맞는 디자인을 추가하기 위해 id, class, className 등 태그마다 선언을 해줘야 하는 번거로움이 있으나, 셀렉터 중복 기능의 특성인 하위 항목에 적용되는 부분을 잘 이해하면 HTML 태그 자체에서 속성 값을 줄일 수 있으므로, HTML 코드의 가독성 또한 상승한다

import

디폴트 디자인이 가능하고, 한쪽에서 선언해둔 컬러 코드나 폰트를 가져다가 다른 scss파일에서 사용하기가 용이하다
-> 그에 따라 유지보수를 효과적으로 할 수 있다

// common.scss


// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;

// Size Section
$borderRadius: 5px;

// default Tags
button {
  cursor: pointer;
  color: $color1;
  background-color: $color2;
  border-radius: $borderRadius;
  border: 0px;

  &:hover {
    color: $color2;
    background-color: $color1;
  }
}

div {
  padding: 5px;
  border-radius: $borderRadius;
  border: $color3 1px solid;
}

// style.scss

@import "common.scss";

.login_box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    border: 0px;
  }

  .box {
    background-color: $color4;
    width: 700px;
    height: 400px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
}