[CSS] CSS pre-processor(전처리기) - Sass(SCSS)

1️⃣ CSS의 한계?

 CSS를 통해서 홈페이지를 꾸미던 중 한 가지 문제가 발생하였는데, 바로 CSS의 양이 한도 끝도 없이 많아지는 것이었다. 이 문제를 해결하기 위해서 열심히 찾아보던 중 CSS 전처리기(Pre-Processor)에 대해서 접하게 되었다. 

💡 CSS 전처리기(Pre-Processor)란? 

 CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해주는 도구이다.

2️⃣ CSS 전처리기 종류?

 CSS 전처리기에는 다양한 모듈이 존재하는데 가장 많이 사용되는 전처리기에는 Sass, Less, Stylus 3가지가 있다. 

3️⃣ CSS 전처리기 사용을 하면 뭐가 좋을까?

 Sass를 사용하기에 앞서, 이 전처리기를 사용하게 되면 어떤 장점들이 있는지 살펴보도록 하겠다. 아래와 같이 개발자가 요구하는 필수적인 요건들을 갖고 있는 것 같다.

유지 관리 
스타일 시트를 분할해서 관리 가능, 중첩, 상속과 같은 요소를 통해 코드를 구조화하여 유지, 관리가 용이

재사용성
공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체

4️⃣ Sass(SCSS) 사용해보기

 앞서 언급한 3가지 전처리기중에 Sass가 가장 처음에 등장하였고 가장 많은 사용 빈도를 가지고 있어서 Sass를 사용해보기로 했다. 

💡 Sass와 SCSS?

  먼저 Sass는 CSS와 달리 중괄호와 세미콜론을 사용하지 않고 코드를 작성하게 된다. 이를 보완하기 위해서 나온 것이 SCSS로 CSS 구문과 호환되도록 하면서 Sass의 거의 모든 기능을 지원하게 된다.

어떻게 사용할까?

 Sass(SCSS)는 웹에서 직접 동작할 수 없기 때문에 최종적으로는 표준 CSS로 동작해야 한다. 따라서, Sass(SCSS)로 코드를 작성하고 나서 CSS로 컴파일해주는 과정이 필요하다.

어떻게 컴파일할까?

✅ SassMeister 사용하기 : 간단한 Sass(SCSS) 코드를 CSS로 컴파일 해주는 페이지

 

✅ node-sass 설치하기 

 

 터미널에서 아래의 코드를 입력해서 컴파일러를 설치한다.

npm install -g node-sass

 아래의 코드를 통해서 컴파일을 진행한다.

node-sass <입력파일경로> <출력파일경로>

어떻게 코드를 작성할까?

✅ 중첩

•  Sass는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할 수 있고, 상위 선택자와 하위 선택자의 소속 여부를 한눈에 볼 수 있다.
•  &를 사용하면 상위 선택자를 참조한다.

.dongle {
  width: 100%
    .btn{
        padding: 10px;
        &.active{
        	color:blue;
        }
    }  
  }

 아래의 코드는 위의 SCSS 코드를 컴파일한 CSS 코드이다.

.dongle {
  width: 100%
 }
  
 .dongle .btn{
  padding: 10px;
 }
 
  .dongle .btn.active{
  color:blue;
 }

✅ 중첩된 속성

 

 font- border- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 중첩해서 사용할 수 있다.

.dongle {
	font:{
    	size: 23px;
        weight: 500;
}

 아래의 코드는 위의 SCSS 코드를 컴파일한 CSS 코드이다.

.dongle{
	font-size: 23px;
    weight: 500;
 }

✅ 변수 설정

 

 반복 사용되는 값을 변수로 지정할 수 있다. 변수 앞에는 항상 $를 붙인다.

$dongle-color : #525252;

.dongle{
	backgroud-color: $dongle-color;
}

아래의 코드는 위의 SCSS 코드를 컴파일한 CSS 코드이다.

.dongle{
	backgroud-color: #525252;
}

 이외에 다양한 기능들이 많이 존재한다.