우리가 css로 작업을 할 때, 같은 코드를 반복해서 쓰거나 연산을 활용해야 하는 경우 css만으로는 불편함을 느껴보신 적 있으시죠?
Sass(Syntactically Awesome Style Sheets)는 css의 전처리기(CSS pre-processor)라고 흔히 말합니다.
Sass는 코드의 재활용성을 높여주고, 가독성 또한 높여주어 유지보수에 용이합니다.
간단하게 말하자면 sass의 최신버전 문법이 scss라고 할 수 있습니다.
Sass가 처음 등장했을 때는 css문법과 상당히 차이가 있었습니다.
때문에 사용에 어려움이 생겨 버전3 이상부터 Scss가 등장했습니다.
Scss는 css와 비슷한 문법을 사용할 수 있도록 만들어졌습니다.
아래의 예시를 확인하세요.
.list
width: 100px
float: left
li
color: red
background: url("./image.jpg")
&:last-child
margin-right: -10px
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}