[Sass/SCSS] 1. Sass/SCSS 기초

1. 왜 CSS 전처리기를 사용해야하는가?

CSS는 작업이 고도화 될 수록 가독성과 유지보수가 어려워질 수 있습니다.

코드의 재활용성을 높여 클린 코드를 작성하고, 가독성과 생산성을 높이기 위해 전처리기의 사용이 필요합니다.

 

2. CSS 전처리기(Preprocessor)

전처리기라는 이름처럼 CSS의 동작 전에 사용되는 기능으로

CSS의 불편한 점을 상쇄시키는 확장 기능입니다.

 

3. 왜 Sass/SCSS를 사용하는가?

가장 많이 사용되는 CSS 전처리기는 Less, Sass(SCSS), Stylus 세 가지가 있습니다.

 

Less는 난이도가 낮아 접하기 쉬우나 기능의 한계가 있습니다.

Stylus는 비교적 후발주자로 성숙도가 떨어지기에 사소한 버그가 있을 수 있습니다.

 

Sass/SCSS는 앞서 언급된 Less와 Stylus의 장점을 모두 가지고 있습니다.

또한, 가장 오래된 CSS의 확장 기능으로서 높은 성숙도, 많은 커뮤니티를 가지고 있으며 기능 또한 만족스럽습니다.

 

4. Sass와 SCSS의 차이

(1) Sass와 SCSS의 구분

SCSS는 Sass(Syntactically Awesome Style Sheets)의 버전 3에서 나왔습니다.

Sass의 모든 기능을 지원하며 CSS구문과 완전 호환되는 CSS의 상위 집합입니다.

SCSS는 CSS와 거의 같은 문법으로 Sass의 기능을 지원합니다.

 

 

if (Sass) {

.list
	width: 100px
    float: left
    li
    	color: red
        background: url("./image.jpg")
        &:last-child
        	margin-right: -10px

} else if (SCSS) {

.list{
	width: 100px;
    float: left;
    li {
		color: red;
        background: url("./image.jpg");
        &:last-child {
			margin-right: -10px;
        }
    }
}

}

 

(2) Sass와 SCSS의 차이점 = Mixins(재사용이 가능한 기능을 만드는 방식)에 차이가 있다.

if (Sass) {

= 과 + 기호로 mixins 기능을 사용.

=border-radius($radius)
	-webkit-border-radius: $radius
    -moz-border-radius:    $radius
    -ms-border-radius:     $radius
    border-radius:         $radius

.box
	+border-radius(10px)

} else if (SCSS) {

@mixin 과 @include 로 기능을 사용.

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
   	-moz-border-radius:    $radius;
	-ms-border-radius:     $radius;
	border-radius:         $radius;
}

.box {@include border-radius(10px);}

}