처음 sass를 접하고 나서 구글링을 통해서 조금 알아보았다. sass는 내가생각 하기에 React 와 비슷하다고 생각이든다.
Scss파일은 Sass컴파일러를 통해 .css 파일로 컴파일 이 된다. 즉, Sass는 Css를 만들기 위한 도구이다. 이러한점에서 리엑트랑 비슷하게 생각을 했다 그래서 다른말로는 Sass를 CSS의(전처리기)라고도 한다. 아래 그림을 보면 조금더 이해가 쉬울것이다.
<출처 : Udemy CSS에 날개를 달아주는 Sass(SCSS) 자료>
근대 우리는 여기서 왜 굳이css를 놔두고 Sass를 사용해야하는 건지 알아야한다. Sass의 가장 큰 장점으로는 CSS작업 생산성을 높여준다 그래서 스타일시트를 보다 빠르게 작성할 수 있고, 편리하고 깔끔하게 가독성이 게 정리할수있다.
Sass의 변수
Sass의 핵심은 변수다. Sass 변숮는 $를 써서 표기한다. 변수를 사용하면 동시에 여러 곳에 동일한 값을 적용할 수 있고, 변경할 때 일일이 바꿔주지 않아도 된다.
ex. $button_color : #fff
.button1 {
color : $button_color;}
.button2 {
color : $button_color;}
Sass 변수에는 전역 변수와 지역 변수가 있다. 전역 변수는 문서 최상위 범위에 적거나 지역 변수 앞에 !global를 넣어 만들 수 있다. 그리고 Sass 변수는 !default를 사용하여 디폴트 값을 줄 수 있다.
그리고 Sass 는 if 문 mixin ,import ,extend 여러가지 기능들이 있다.
출처:https://gomcine.tistory.com/entry/Sass-Scss-%EA%B3%B5%EB%B6%80-%EB%B0%A9%EB%B2%95
인용을하였습니다.
