SASS(Syntactically Awesome StyleSheet) 개념 + Sass와 CSSS 차이

SASS(Syntactically Awesome StyleSheet)

css는 연산도 안되고, 조건도 반복도 안된다. 프라퍼티만 선언하고, 선언형으로만 되었다.

결론은 SCSS와 SASS는 CSS를 편리하게 이용할 수 있도록 도와주며 추가 기능도 있는 확장판 ( CSS를 확장하는 스크립팅언어 ) 정도로 생각하면 좋을 것 같다. (css preprocessor 전처리기)

우리가 흔히 CSS 문서 작성할 때는 많은 반복적인 작업을 요구하고 Color 값을 찾는 일, tag를 닫는 일 등 번거로운 작업 역시 포함되어있다. 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 이로 인해서 이후 유지관리에 많은 영향을 준다. 이런 CSS의 문제점들을 Programmatically 한 방식. 즉 변수, 함수, 상속 등 일반적인 프로그래밍 개념을 사용하여 해결해 나갈 수 있다.

 

장점

• 재사용성 - 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체
• 시간적 비용 감소 - 임의 함수 및 Built-in 함수로 인해 개발 시간적 비용 절약
• 유지 관리 - 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이

자세한 내용은 https://kdydesign.github.io/2019/05/12/css-preprocessor/

Sass 와 scss와의 차이

• 자매품 같은 존재이다. 문법의 차이가 있다.
• Sass는 세미콜론 없고 중괄호 사용안함
• scss는 css랑 비슷함(즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말)

 

 

 

참고자료:

김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업 section 2

https://heropy.blog/2018/01/31/sass/

https://kdydesign.github.io/2019/05/12/css-preprocessor/