CSS, SCSS, SASS

[Hah-nna]

SASS, SCSS의 차이점은 무엇인가요?

SCSS가 SASS에 비해 더 넓은 범용성과 CSS 호환성을 갖추고 있음 CSS에서 지원하는 모든 문법과 기능들을 SCSS 문법 안에서 사용할 수 있으므로 CSS 호환성을 갖추게 됨. 이런 호환성 덕분에 모든 CSS 라이브러리를 그대로 이어서 사용할 수 있고 기존 CSS를 SCSS로 전환하는 작업을 쉽게 시작할 수 있음 또한 SCSS는 기존 CSS를 사용하면서도 SASS의 추가기능들을 사용할 수 있음

추가 기능들 - Nesting: 선택자를 중첩하여 사용할 수 있음 - Variables: 변수 정의와 사용 가능 - Mixins: 스타일을 재활용할 수 있는 믹스인 기능 - Extend/Inheritance: 부모 선택자의 스타일을 상속받을 수 있음 - Operators: 산술 연산자 사용 가능 - Functions: 제공하는 빌트인 함수와 사용자 정의 함수 사용 가능 => SASS에서 제공하는 위 기능을 SCSS에서 기존CSS 문법과 호환해서 사용가능함

또한 SASS는 중괄호 대신 들여쓰기, 속성을 구분하기 위해서 줄바꿈을 사용함. 그래서 멀티라인 작성 시에 컴파일 에러가 발생하기 때문에 한 줄로 작성을 해야함.

$breakpoints: (
  sm: 480px,
  md: 768px,
  lg: 1024px
)

// 꼭 한 줄에 작성해야 합니다
$breakpoints: ( sm: 480px, md: 768px, lg: 1024px )

하지만 SCSS는 기존 CSS 문법처럼 작성할 수 있음.

CSS, SASS, SCSS의 차이점은 무엇인가요?

CSS는 웹 표준 스타일시트 언어로 브라우저에서 직접 해석되어 사용됨 SASS는 CSS의 확장된 버전. SASS로 작성된 코드는 CSS로 컴파일되어 브라우저에서 적용됨 SCSS는 SASS의 최신 버전. CSS와 유사한 문법을 가지고 있고 SASS보다 더 많이 사용된다고 함

[Hah-nna]

https://heyjihye.com/blog/write-sass-with-scss/ https://sass-lang.com/documentation/syntax/

[Hah-nna]

https://cocoon1787.tistory.com/843