SCSS(SASS) CSS 차이

SCSS의 필요성

CSS의 단점

1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.

2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다.

 

.SCSS 사용시에는 위에 언급한 CSS의 단점을 보완할 수 있다.

• 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
• 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
• 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.

 

대신 SCSS(SASS)는 브라우저가 이해할 수 없기 때문에 브라우저가 이해할 수 있는 CSS로 컴파일하는 과정을 거쳐야 하는 번거로운 부분이 있다.

 

 

.css의 예시

/*.CSS*/
.contents {
	padding : 10px;
}

.contents .boxArea{
    border:1px solid #ddd;
    color:#ccc;
}

.contents .boxArea .box {
    margin:4px;
    background:#f7f7f7;
}

 

위에 .css파일을 .scss로 변경해 보자

 

.SCSS의 예시

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

반복되는 부모 요소를 한번만 쓰기 때문에 유지보수에 용이한 부분이 있고 구조를 파악하기가 쉽다.