React | SCSS

SCSS와 SASS

CSS코드 중첩, 변수화, 재사용등 여러기능을 제공

 

SASS

Syntactically Awesome Style Sheets - 문법적으로 짱멋진 스타일 시트

기존 CSS의 단점을 보완하고 효율성을 높이기 위해서 만들어진 문법

.button
  background: blue
  a: hover
    background: gray

들여쓰기 사용

 

SCSS

Sassy CSS - 깔삼한 CSS

.button {
  background: blue;
  a: hover {
    background: gray;
  }
}

중괄호 사용 -> 기존 CSS와 더 비슷해서 가독성이 좋음

 

사용법

터미널 창에서 설치 - npm install sass

SCSS 화장자 파일 쓰기 - App.scss index.scss

 

장점

• 코드의 재사용성이 더 좋음
• 코드의 가독성이 더 좋음
• 유지보수가 쉬워짐

단점

• CSS 대비 추가학습이 필요함
• SCSS 코드를 CSS로 변환하는 과정이 필요해 조금 더 느림

 

---

SCSS의 변수 사용법

SCSS에서 변수는 스타일을 더욱 효율적으로 관리할 수 있게 해주는 도구

변수는 색상, 크기, 폰트 스타일 등 자주 사용하는 값을 저장하고 재사용할 수 있으며, 이를 통해 코드의 재사용성과 유지보수성을 향상시킬 수 있다

 

변수 선언 및 사용방법

변수를 선언할 때는 $기호를 사용하며, 선언된 변수는 이후 코드에서 여러번 사용할 수 있다

$font-big: 50px;
$font-mid: 40px;
$font-small: 30px;

$font-bold: 900;
$font-thin: 200;

$color-blue: rgb(58, 109, 228);

.test {
  color: $color-blue;
  font-size: $font-big;
  font-weight: 900;
}

h2 {
  color: pink;
  font-weight: $font-bold;
  font-size: $font-mid;
}

변수는 폰트 크기, 폰트 두깨, 폰트 색상을 저장하는데 사용되며

선언된 변수를 클래스나 태그의 스타일 속성 값으로 사용할 수 있다

 

다양한 데이터 타입(색상, 숫자, 문자열 등)에 대한 변수 사용예시

SCSS 변수는 다양한 데이터 타입을 지원하여 스타일을 더욱 유연하게 관리할 수 있게 함

 

색상 변수

$color-blue: rgb(58, 109, 228) // 색상 변수
.test {
  color: $color-blue;
}

숫자 변수

$font-big: 50px; // 숫자 변수
.test {
  font-size: $font-big;
}

문자열 변수

$font-family: "Arial, sans-serif" // 문자열 변수
body {
  font-family: $font-family;
}

복합 데이터 타입

$padding: 1.5em;
.logo {
  padding: $padding;
}

 

결론

SCSS 변수는 스타일 속성 값의 재사용성을 높이고, 코드의 일관성을 유지할 수 있도록 도와주며,

유지보수가 용이해지고 코드의 가독성이 향상됨

 

---

SCSS의 중첩 규칙 이해 및 활용

SCSS의 중첩 규칙을 사용하면 CSS 선택자 구조를 직관적으로 표현할 수 있어 코드의 가독성과 유지보수성이 향상됨

 

기본 중첩 규칙 예시

SCSS에서 중첩은 부모 선택자 내에서 자식 선택자를 정의하는 방식으로, CSS 구조를 그대로 표현할 수 있다

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;

  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  &.react:hover {
    filter: drop-shadow(0 0 2em #61dafbaa);
  }
}

.logo와 .logo.react:hover 스타일을 중첩 구조로 표현하여 가독성을 높임
자기 자신을 셀렉트 할 경우 - & 사용

 

복잡한 CSS 구조에서 중첩을 통한 코드 간결화 예시

중첩을 활용하면 복잡한 구조도 간단하게 표현할 수 있다

예를 들어, 리스트 항목과 그 내부 요소를 중첩을 통해 관리할 수 있다!

li {
  &:hover {
    background-color: lightgray;
  }

  color: $color-blue;
  font-weight: $font-thin;
  font-size: $font-small;

  p {
    color: black;
  }

  section {
    color: blue;
  }

  article {
    color: pink;

    h3 {
      color: green;
    }
  }

  h2 {
    color: blueviolet;
  }
}

리스트 항목 내의 다양한 요소 스타일을 한 곳에서 중첩으로 관리하여 코드가 간결해짐을 볼 수 있다

 

중첩 사용 시 발생하는 장단점

장점

• 가독성 향상 : 스타일이 계층 구조로 정리되어 코드가 직관적
• 코드 간결화 : 반복적인 선택자 정의를 줄여 코드가 간결해짐
• 유지보수 용이 : 관련 스타일이 함께 묶여있어 관리하기 쉬움

단점

• 과도한 중첩 : 중첩이 길어질수록 코드가 복잡해지고, 유지보수가 어려워질 수 있음
• 높은 구체성 : 중첩이 깊어질수록 CSS의 구체성이 높아져 의도치 않는 스타일 충돌이 발생할 수 있음
• 퍼포먼스 저하 : 지나치게 복잡한 중첩은 브라우저가 스타일을 해석하는데 부담이 될 수 있음

 

SCSS의 중첩 규칙은 적적하게 활용하면 코드의 유지보수성을 크게 향상시킬 수 있지만, 과도한 사용은 피하는 것이 좋음!

 

---

믹스인 (Mixin)

반복되는 코드를 재사용할 수 있게 해주는 틀

장점

• 코드 중복 줄임
• 가독성, 유지보수성 향상

 

SCSS 믹스인의 이해 및 활용

믹스인 선언 및 호출 방법

믹스인 선언

@mixin 키워드를 사용해 반복되는 스타일 정의

SCSS의 믹스인은 반복적인 스타일을 재사용할 수 있게 해주며, 코드의 재사용성과 유지보수성을 크게 향상시킴

@mixin flex($align: start, $justify: start, $gap: 0, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  gap: $gap;
}

믹스인 호출

@include 키워드를 사용해 선언된 믹스인 호출

ul {
  @include flex($gap: 20px, $direction: column);
}

 

인자를 사용하는 믹스인의 활용법

인자를 받는 믹스인 선언

@mixin font($color, $size, $weight) {
  color: $color;
  font-size: $size;
  font-weight: $weight;
}

인자를 사용하여 호출

h2 {
  @include font(pink, $font-mid, $font-bold);
}

 

반복되는 스타일 블록을 믹스인으로 분리하여 코드 재사용성 및 유지보수성 향상되는 예시(css -> scss)

기존 CSS에서 반복되는 스타일을 믹스인으로 변환하여 재사용성을 높일 수 있음

예를 들어, 반복되는 Flexbox 설정을 믹스인으로 분리하여 사용함

 

기존 CSS (반복되는 스타일)

ul {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 10px;
}

section {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

SCSS로 개선 (믹스인 사용)

// 반복되는 스타일을 믹스인으로 분리
@mixin flex($align: start, $justify: start, $gap: 0, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $align;
  justify-content: $justify;
  gap: $gap;
}

// 믹스인 호출로 반복 코드 제거
ul {
  @include flex($gap: 20px, $direction: column);
}

section {
  @include flex(center, space-between, 20px);
}

믹스인은

반복적인 스타일을 하나의 블록으로 분리하여 코드 재사용성을 높이고, 유지보수가 쉬워지도록 도와줌

스타일 변경 시에도 믹스인만 수정하면 관련된 모든 곳에 자동으로 반영되므로 더욱 효율적임