SCSS
📌 CSS의 한계
- 선택자(Selector)를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야 한다.
- 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든 것들을 수정 변경해야 한다.
📌 SCSS(SASS)의 장, 단점
- 선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있다.
- 변수(Variable)를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다.
- 프로그래밍 언어에서 사용하는 조건문, 반복문을 사용해서 동적인 CSS 관리가 가능하다.
- SCSS(SASS)는 CSS로 컴파일(Complie) 거쳐야 하는 번거로움이 있다.
- 하지만 거의 유일한 단점인 컴파일을 거쳐야 하는 문제점을 extension으로 쉽게 해결할 수 있다.
- 클래스 명을 변경할 경우 SCSS의 경우. frame을 한 번만 변경하면 되지만, CSS의 경우. frame이 들어간 모든 선택자를 찾아가서 변경해줘야 한다.
.frame {
padding: 20px;
.items {
font-weight: bold;
color: crimson;
.item {
margin: 10px;
font-size: 18px;
border: 1px solid #000;
}
}
}
.frame {
padding: 20px;
}
.frame .items {
font-weight: bold;
color: crimson;
}
.frame .items .item {
margin: 10px;
font-size: 18px;
border: 1p sold #000;
}
📌 SCSS와 SASS의 차이점
- SASS: Syntatically Awesome Style Sheets
- SCSS: Sassy Cascading Style Sheets
- SASS가 먼저 생겨났고 나중에 SCSS가 생겨났다. 그리고 SASS와 SCSS는 서로 완벽하게 호환된다.(최근에는 주로 SCSS를 사용한다)
- {}(중괄호)와 ;(세미콜론)의 유무에 따른 사용 방식이 아주 조금 다르다.
- SASS는 중괄호와 세미콜론을 사용하지 않고, SCSS는 중괄호와 세미콜론을 사용한다.
- 그래서 SCSS가 CSS와 같은 방식이라 사용 및 이해하기 더 쉽다.
- 파일 확장자는 SASS는 .sass이고, SCSS는 .scss이다.
- 재사용 기능을 만드는 방식인 믹스인(Mixins)에서 거의 유일한 차이가 난다.
.frame {
padding: 20px;
.items {
font-weight: bold;
color: crimson;
.item {
margin: 10px;
font-size: 18px;
border: 1px solid #000;
&:hover {
background-color: blue;
}
}
}
}
// .sass
.frame
padding: 20px
.items
font-weight: bold
color: crimson
.item
margin: 10px
font-size: 18px
border: 1px solid #000
&:hover
background-color: blue