SASS, SCSS

211007 TIL

SASS(Syntactically Awesome Style Sheets)

#문법적으로 대박 멋진 스타일시트!

웹페이지에 필수적이지만 사용하기에 어려움&헷갈림이 많은 css를 유지보수 하기 쉽게 만들어준다. SASS는 CSS 전처리기로, CSS가 만들어지기 전에 변수, 조건문, 내장함수 등의 다양한 문법을 사용할 수 있다.

비슷한 전처리기로는 SCSS, Less, Stylus 등이 있다. 이들은 문법이나 작동 방식이 조금 다르지만 모두 비슷한 일을 한다.

특징

• 들여쓰기 문법을 사용한다 (+ 줄바꿈)
  ​
  ​
  ​

SCSS(Sassy CSS)

#멋진 CSSㅋ

SCSS는 기존의 CSS 작성 방식과 유사하고, CSS에 좀 더 호환될 수 있도록 도입되었다. 대괄호와 세미콜론을 사용해서 좀 더 친숙하게 사용 가능하다. SASS가 2010년 5월에 버전3로 업그레이드 되며 갖춰진 새로운 문법 체계이며, 공식 문서도 SCSS로 작성되어있다.

특징

• CSS를 구조화하여 사용할 수 있다
• SASS보다 더 넓은 범용성, 호환성을 가진다
• 대괄호와 세미콜론을 사용한다.
  ​
  ​
  ​

공통점

• 두 문법 모두 스타일에 변수를 만들어서 적용할 수 있다.
• @mixin을 선언하여 사이트 전체에서 재사용 가능한 css 속성 그룹을 만들 수 있다. 출처 : https://sass-lang.com/guide
• @extend로 css 속성 집합 공유가 가능하다.
• 컴파일 후 일반 css 문법으로 바꾸어 적용한다

​

---

SassMeister | The Sass Playground!
설치 없이 컴파일을 테스트할 수 있는 사이트

---

리액트 템플릿을 찾아보다가 발견한 SCSS. 평생 헷갈리고 헤멜 줄 알았던 css도 뭔가 가능성이 보이는 것 같다 😄 특히 @mixin이 정말 자주 쓰일 것 같다! 지금 하는 프로젝트에도 적용해봐야겠다.

​
​
참고 링크
https://nykim.work/97
https://sass-lang.com/