🔷SASS의 정의 :
CSS는 프로젝트의 규모가 커질고 고도화 될수록 코드가 복잡해지고 유지보수가 불편해져 어려움이 생긴다. 불필요한 선택자(Selector)/ 연산 기능 한계 / 구문(Statement)의 부재/ 이러한 치명적인 단점을 보완해 줄 수있는 방법 중 하나인 SASS는 (1)간결하고 재사용이 용이한 CSS 코드를 작성할 수 있으며 (2) 코드의 중복을 피할 수 있다. 한마디로! 엄청나게 큰 스타일시트를 잘 구조화해서 사용할수있도록 효율을 높여준다.(전처리기 종류: SASS/LESS/STYLUS).
🔷SASS의 특징 (사용하는 이유) :
- 호환성: 모든 버전의 CSS와 완벽하게 호환된다.
- 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.
- 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다.
- 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.
- 신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.
- 확장성: Sass 기반의 프레임워크가 다수 존재한다.
- 프로그래밍 언어에서 사용하는 조건문 , 반복문을 사용해서 동적인 CSS관리가 가능**
즉 ! SASS는 CSS가 가지고 있지 않는 유용한 기능들을 지원해준다. 코드를 빠른 시간 안에 간결하게 작성할 수 있도록 해 주고, 코드 수정 시에 신경 써야 할 부분을 최소화해주는 효과도 있다. Sass가 제공하는 기능으로는 변수(variable)할당 , 중첩(nesting)구문, 모듈화(modularity) ,믹스인(Mixins) 믹스인 확장&상속(Extend/Inheritance) 연산자(Operators)등이 대표적이다.
🔷 SASS와 SCSS의 차이 :
- SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어이다
- SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능을 추가할수있다
- SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식이다
- 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많다
- SASS보다 SCSS가 CSS와의 호환성이 더 좋다
full-name으로 봤을 때 SASS, SCSS 둘 다 문법적으로 어썸한 CSS라는 뜻을 가지고 있다. SCSS의 경우 SASS보다 뒤에 나왔고, 약간의 문법 차이가 있지만 SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가진다. 큰 차이점은 SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만 SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분한다. 또 한 공식 레퍼런스는 SASS보다 CSS와 더 비슷한 SCSS를 선호한다고 한다. 그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 더 많다
🔷 SASS와 SCSS가 적용되는 원리 :
SASS, SCSS를 CSS Pre-processor (전처리기) 라고도 하는데 스크립팅 언어이기 떄문에 SASS, SCSS로 작성된 파일들은 직접적으로 웹에 적용 될 수 없다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하도록 한다.
