SCSS와 SASS 차이

SCSS와 SASS 차이

결론적으로 말하면 SCSS와 SASS는 같은거라 볼 수 있다.

 

SASS가 먼저 생겼고 SASS와 SCSS는 서로 호환이 가능하다.

따라서 SASS라고 말해도 그것이 SCSS를 지칭하는 것이라 볼수 있다.

 

.SASS 예시

/*.SASS*/
.contents
    padding : 10px
    .boxArea
    	border:1px solid #ddd
        color:#ccc
      	.box
            margin:4px
            background:#f7f7f7

 

.SCSS 예시

/*.SCSS*/
.contents {
    padding : 10px;
    .boxArea{
    	border:1px solid #ddd;
        color:#ccc;
      	.box {
        	margin:4px;
            background:#f7f7f7;
        }
    } 
}

 

위에 예시를 보면 알겠지만 두개는 동일한 구조를 가지고 있고 {}(중괄호) ;(세미콜론) 유무의 차이 밖에 없다.

 

파일확장자는 각각 SCSS는 .scss이고 SASS는 .sass이고

가독성이 좋은 scss를 주로 사용한다.

 

※ 재사용 기능 개발시 믹스인(Mixins)을  사용할때 한 두개 정도의 구문차이가 있다.