SCSS란?

StyleSheets Language 로 CSS 를 보다 효율적으로 사용하기 위한 언어이다.
기본적으로 Indent 와 Bracket 을 이용한 Nesting 구조로 작성하며,
컴파일러을 통해 CSS 파일로 변환된다.

p	{
	color: red;
    span	{
    	color: blue;
    }
}

SASS 와의 비교

SASS (Simantically Awesome StyleSheets) 는 SCSS 의 원조 정도로 생각하면 된다.
SCSS 는 SASS 에서 파생된 언어이기 때문이다.

SASS 는 SCSS 와 달리 Indent 를 통해 구조화한다.
하지만 Indent 에 민감하다 보니 의도치 않은 에러가 날 수 있기 때문에,
SCSS 를 사용하는 것이 더 적합하다.

p
	color: red
    span
    	color: blue

CSS 대신 SCSS 를 사용하는 이유

CSS 만으로 코드를 작성할 경우, 아래와 같은 문제점들이 발생한다.

• 가독성이 저하된다.
• 중복 코드 혹은 레거시 코드 가 생기기 쉽다.
• 수정을 위해 전체 코드를 확인해야 한다.
• 프로젝트가 커질수록 작업속도가 느리다.

(참고로 lagacy code 란 누군가가 남겨놓은 코드를 의미한다.)

SCSS 패턴

일반적으로 SCSS 디렉토리 구조는 아래와 같이 형성한다.
파일명 앞에 언더바(_) 는 해당 파일은 특정 파일에 @import 될 것 을 암시할 때 사용한다.

SCSS 기본 문법

@import

다른 파일의 코드를 가져올 때 사용한다.

// main.scss
@import 'path1';
@import 'path2';
@import 'path3';
...

$variable

// _variables.scss
$h1-color: red;
$h2-color: blue;

@import `../abstracts/_variables.scss`;

h1 {
	color: $h1-color;
}

@mixin

예제1

// _mixins.scss
@mixin ellipsis {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@import `../abstracts/_mixins.scss`;

p {
	width: 300px;
	@include ellipsis;
}

예제2

// _mixins.scss
// :center 의 경우, argument 를 따로 넘겨주지 않을 경우 적용하는 default 값이다.
@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
	background-image: $bg-url;
    background-repeat: no-repeat;
    background-position: $bg-position;
    background-size: $bg-size;
    background-color: $bg-color;
}

@import `../abstracts/_mixins.scss`;

.bg {
	margin: 0 auto;
	width: 100px;
    height: 100px;
	@include bg-img('img-url/');
}

@function

@function half-opacity($color) {
	$color: rgba($color, .5);
    @return $color;
}

@import `../abstracts/_mixins.scss`;

h1 {
	color: half-opacity(red);
}