[CSS] SCSS 언어란?

CSS : SCSS

이번 시간에는 CSS 언어 중 하나인 SCSS에 대해 알아보겠습니다!😄

---

#1. SCSS란?

코딩이 복잡해지게 되면 코드의 중복 및 오류 등의 이유로 CSS는 유지보수가 어려워지고 가독성 또한 떨어지게 됩니다.
이러한 CSS의 단점을 보완하고자 등장한 문법이 SCSS라고 합니다. SCSS는 Syntactically Awesome StyleSheet의 약어로 코드의 재사용성을 높이고, 가독성을 증가시켜 개발의 효율성을 높이기 위한 전처리기 언어입니다.
!! 여기서 중요한 점은 SCSS언어로 직접 구현하는 것이 아니라 Scss로 작업 후 CSS언어로 컴파일하여 웹에 구현시키는 원리라는 것 입니다! 즉 CSS의 대체 언어가 아닌 좀 더 효율적으로 CSS 코드 작업을 할 수 있는 도구의 개념이라 볼 수 있습니다😀

---

1-1 SCSS와 변수

SCSS에서는 여러 추가 기능들이 있는데 그 중 변수를 선언하여 속성을 처리하는 방법입니다. 이는 SCSS의 장점 중 하나인 재사용성을 높여주는 기능입니다.

! 변수 ($) 사용법 !
$변수명: 속성값;
SCSS에서 $는 변수를 뜻하는 기호 입니다. 때문에 반복적으로 사용할 속성은 변수($)로 속성 값을 지정해주어 재사용을 쉽게 할 수 있습니다.

✏️ SCSS

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS 컴파일 ver.

✏️ CSS

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

1-2. SCSS와 네스팅(중첩) 기법

네스팅 기법은 SCSS의 가장 큰 장점이라고 볼 수 있습니다. 바로 선택자 및 속성을 중첩시킬 수 있으며 상위 요소를 참조하는 것이 가능하기 때문입니다.
특히 HTML 코드가 복잡할 수록 충돌을 줄이기 위해 CSS에서는 수많은 선택자들을 태그마다 선언해줍니다. 하지만 이러한 방법은 굉장히 번거롭기 마련이죠.
SCSS의 네스팅 기법 중 하나인 선택자 중첩을 사용한다면 가독성이 높아지고, 효율적인 개발이 가능해지며 더 나아가 HTML의 코드의 가독성도 높아지게 됩니다.

! 네스팅 기법과 & 기호 사용 방법 !
& = 부모 선택자
&:가상 요소(or 가상 클래스) {};

💡 그럼 다음의 예제를 통해 네스팅 기법을 이해해보도록 합시다!

✏️ SCSS 중첩01

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

💡 위의 SCSS코드를 CSS 언어로 확인해봅시다!

✏️ CSS 컴파일

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

! 설명 !
위 예제를 보면 nav가 부모 요소임을 알 수 있죠?!
CSS는 모든 자식요소에 부모요소 선택자를 붙여서 작업해야 하지만 SCSS에서는 부모 요소의 {}에 부모 요소없이 자식 요소만 선언하여 작업 할 수 있는 것을 볼 수 있습니다.
대신 주의할 점은 SCSS에서는 부모 - 자식 관계를 알려주는 라인 정렬이 중요하기 때문에 꼭 확인해가며 사용해줍니다.

✏️ SCSS 중첩02

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

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

  &:before {
    content: '';
  }
}

💡 위의 SCSS코드를 CSS 언어로 확인해봅시다!

✏️ CSS 컴파일

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

label:hover {
  color: white;
  background-color: $color8;
} 

label::before {
  content: '';
}

! 설명 !
위 예제를 보면 자식 요소 뿐만 아니라 :hover와 ::before같은 가상클래스와 가상요소도 &(=부모 선택자)기호를 사용하여 선언한 것을 볼 수 있습니다.
&를 이용한 중첩도 위의 중첩과 마찬가지로 해당 부모 요소의 {}안에 라인을 잘 맞춰서 넣어주면 됩니다.

---

이처럼 네스팅 기법을 사용할 땐 각 태그 간 관계를 잘 이해하여 중첩하는 것이 중요하며 중첩을 너무 남발하면 표준성에 어긋나기 때문에 적절하게 사용해주어야 합니다.
다음 시간에는 SCSS를 사용한 🐶 움직이는 강아지 일러스트 🐶를 실습해보겠습나다. 고생많으셨습니다🤩