CSS 와 SCSS의 차이

CSS와 SCSS

크고 복잡한 프로젝트에서 CSS 대신 SCSS를 사용하면, CSS 코드를 더욱 효율적으로 작성하고 유지 관리할 수 있다.

CSS 단점

선택자 생성 시 불필요한 부모요소 선택자를 적어야 한다.
변경사항이 있을 때 관련된 모든 것을 수정해야 한다.

section ul {
  padding: 0;
  list-style: none;
}
section li {
  display: block;
}

CSS와 SCSS의 주요 차이점

변수: SCSS에서는 변수를 사용하여 재사용 가능한 값을 저장할 수 있다. 이를 통해 코드의 재사용성을 높이고 유지 관리를 용이하게 할 수 있다.
중첩: SCSS에서는 선택자를 중첩하여 사용할 수 있다. 이를 통해 코드의 가독성을 높이고 선택자 간의 관계를 명확히 표현할 수 있다.
믹스인: SCSS에서는 믹스인을 사용하여 코드를 재사용할 수 있다. 믹스인은 CSS 선언 블록을 정의하고 이를 여러 곳에서 재사용하는 기능이다.
연산: SCSS에서는 색상, 숫자, 길이 등의 연산을 수행할 수 있다. 이를 통해 동적인 스타일링을 할 수 있다.

// 가운데 정렬
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 양쪽 정렬
@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    display: inline-block;
    max-width: 100%;
  }
  p {
    margin-left: 10px;
    margin-bottom: 0px;
  }
}

SCSS를 사용하려면 CSS보다 높은 학습 곡선을 요구하며, SCSS 코드는 CSS로 컴파일해야 웹에서 동작한다는 점을 알아두어야 한다.