SCSS

최근 회사에서 SCSS 문법을 사용하여 개발을 진행하였다.
기억해두면 좋을 것 같아 기본적인 사용법 및 문법을 기록하려고 한다.

SCSS

• CSS를 편리하게 사용할 수 있도록 해주는 확장판 스크립트 언어
• CSS와 비슷한 문법으로 Sass의 기능을 사용할 수 있음
• CSS -> Sass -> SCSS 순서로 생겨남

주요 기능

1. 변수

반복적으로 사용되는 스타일 구문을 변수로 지정 후 사용하는 것이 가능하다.
$test-color: #fff 와 같은 방식으로 사용한다.
내가 진행한 프로젝트에서는 최상위 스타일시트에 변수 선언 후 이를 전역적으로 사용하였다.

반응형 개발 시 $mobile: 640px 와 같은 식으로 사용하여도 좋다.

$test-group: ( test1: #fff; test2: #000; ) 식으로 선언하는 것도 가능하다.
이 방식으로 사용할 때는 color: map-get($test-group, test1) 문법을 이용한다.

2. 조건문 / 반복문

• 조건문

$width: 500px; 
width: if($width > 200px, $width, null) 
@if (조건) { } 
	@else if (조건) { } 
		@else { }

• 반복문
  @for $변수 from 시작 through 종료 { }
@for $변수 from 시작 to 종료 { }

3. @mixin

여러 번 반복적으로 사용되는 스타일 묶음을 정의하는데 사용한다.

정의: @mixin 선언이름 { 스타일 내용 }
사용: .class { @include 선언이름; }

자주 사용되었던 flex 속성의 경우

@mixin flex-default { display: flex; justify-content: center; }
.block { @include flex-default; }

처럼 선언하여 이용하였다.

4. @extend

특정 선택자를 상속하는 지시자로, 가장 유용하게 사용한 기능 중 하나이다.

.block1 { 
  width: 300px;
  height: 200px;
  background-color: black;
}

.block2 {
  @extend .block1;
  color: #fff;
}

이와 같이 작성 시, block2는 block1의 스타일 값을 상속받으며 추가로 선언한 스타일의 속성 (color: #fff) 또한 적용받을 수 있다.

5. 중첩

.block {
	width: 300px;
  	background-color: red;
  	color: #fff;
    
    &:hover {
      background-color: blue;
    }
}

가상 클래스 선택자 및 가상 요소 사용 시 클래스 내부에 중첩적으로 선언하는 것이 가능하다.