[CSS] Sass(SCSS)란

 

 

 

Sass

 

 

 

◽ Sass(Syntactically Awesome Style Sheets)란?

- 대표적인 CSS 전처리기 중 하나이다.

- CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다.

- CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있다.

- 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다.

 

◽ SCSS(Sassy CSS)란?

- Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

- {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다.

 

◽ CSS로 컴파일하는 도구

- Webpack: 모듈 번들러

- Gulp: 빌드 자동화 도구

 

 

---

 

◽ Sass의 문법

- 변수(Variables): $를 사용하여 변수를 만들어 사용한다. 

$font-stack: sans-serif;
$primary-color: black;
/* 변수 재할당도 가능하다. */
$font-color: $primary-color;

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

 

 

- 중첩(Nesting): CSS 선택자를 중첩할 수 있다.

div {
	ul {
		margin: 0;
		padding: 0;
	}
    
	li {
		display: inline-block;
	}
}

 

 

- 상위선택자호환(Ampersand): 중첩에서 &키워드는 상위(부모) 선택자를 참조하여 치환한다.

[예시 1.]
/* SCSS */
.btn {
    position: absolute;
    
    /* <div class="btn active">의 경우 */
    &.active {
        color: red;
    }
}

/* CSS로 컴파일 */
.btn {
    position: absolute;
}
.btn.active {
    color: red;
}

 

[예시 2.]
/* SCSS */
.fs {
	&-small { font-size: 12px; }
	&-large { font-size: 16px; }
}

/* CSS로 컴파일 */
.fs-small {
	font-size: 12px;
}
.fs-large {
	font-size: 16px;
}

 

 

- 모듈화: 작은 조각으로 분리할 수 있다. sass 파일 이름 앞에 '_'가 붙은 경우 이를 CSS파일로 생성하지 않는다.

/* 파일이름: _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

/* 파일이름: styles.scss */
/* 앞서 작성한 _base.sass파일을 사용할 수 있다. */
/* sass가 알아서 인식하므로 작성시에 파일확장자를 포함할 필요가 없다. */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

 

- Mixins: @mixin을 사용하면 사이트 전체에서 재사용하는 css 선언 그룹을 만들 수 있다.

@mixin theme($theme: DarkGray) {
	background: $theme;
	box-shadow: 0 0 1px reba($theme, .25);
	color: #fff;
}

/*
    css로 컴파일되면 아래와 같다.
    .info {
      background: DarkGray;
      box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
      color: #fff;
    }
*/
.info {
	@include theme;
}

.alert {
	@include theme($theme: DarkRed);
}

.success {
	@include theme($theme: black);
}

 

 

- 확장(Extend)/상속(Inheritance): @extend의 사용

%message-shared {
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
}

.message {
	@extend %message-shared;
}

.success {
	@extend %message-shared;
	border-color: green;
}

.error {
	@extend %message-shared;
	border-color: red;
}

 

- 주석의 compile 여부

// 이 주석은 sass에서만 출력된다.
/* 이 주석은 css로 컴파일 된다. */

 

 

 

 

출처 및 참조

Sass(SCSS) 완전 정복!

[공식문서] Sass Doc

[SassㆍSCSS] SASS 문법 3편 - 변수, !global, !default

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.