[Sass] Sass(Scss)란?

1 SASS(SCSS)란?

---

CSS란?

Cascading Style Sheets, 문서의 스타일을 구현하는 스타일 시트 언어

 

CSS Preprocessor

Sass, Less 등이 css전처리기이다. 

css가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 css가 동작하지만 우리는 css의 불편함을 이런 확장 기능으로 상쇄할 수 있다.

 

Sass

Syntactically Awesome Stylesheets, 문법적으로 엄청난 스타일 시트

- CSS의 단점을 보정하기 위한 css의 확장으로 나온 스크립트 언어.

프로젝트가 점점 커지고, 스타일 시트도 덩달아 커지게 되면 유지보수가 힘들어진다. 그래서 이러한 단점들을 보완하기 위해

variable, nesting, mixin, inheritance 등의 개념이 추가된 것이 Sass다.

- Sass는 Preprocessing 과정을 통해 css로 해석 및 컴파일 된다.

 

Scss

- Sass 세번째 버전에서 추가되었는데 Sass의 모든 기능을 지원하면서 CSS구문과 완전히 호환되도록 만들어졌다.

즉 Scss는 css와 거의 같은 문법으로 Sass 기능을 지원한다.

 

 

Sass와 Scss 차이점

- {}(중괄호)와 ;(세미콜론) 유무

Sass :

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

Scss :

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

Sass 는 선택자의 유효범위를 '들여쓰기'로 구분하고, Scss는 { } ( 중괄호) 로 범위를 구분하고 각 속성의 끝에는 ;(세미콜론)을 붙인다.

 

- Mixin

믹스인은 재사용 가능한 기능을 만드는 방식을 의미.

 

Sass :

=border-radius($radius)
    -webkit-border-radius : $radius
    -moz-border-radius : $radius
    -ms-border-radius : $radius
    border-radius : $radius
    
.box
	+border-radius(10px)

Scss :

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

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

Sass는 =, + 기호로 mixin 기능을 사용했고,

Scss는 @mixin과 @include 로 기능을 사용한다.

 

 

참고 :

[개념정리] CSS? Sass? SCSS?

 

skyTechBlog

 

Sass(SCSS) 완전 정복!