차이점 b/w SASS & SCSS

SASS(Syntactically Awesome Style Sheets)는 CSS로 컴파일되거나 해석되는 전처리기 스크립팅 언어입니다. 구문이 향상되었습니다. 수학 및 변수 지원을 사용하면 CSS가 더욱 강력해집니다.

SASS에는 두 가지 구문이 있습니다.

최신 버전: SCSS(Sassy Cascaded Style Sheets)

이전 버전: 원본 SASS(Syntactically Awesome Style Sheets)

따라서 둘 다 가능한 두 가지 구문을 가진 SASS 전처리기입니다. 그러나 이 모든 것은 결국 CSS를 생성하는 SASS 사전 컴파일러에서만 작동합니다. CSS 표준 자체의 확장이 아닙니다.

오리지널 SASS

SASS는 구문이 들여쓰기된 구형 css 전처리기입니다.

Ruby와 유사한 구문이 있습니다.

더 적은 구문 제약 조건

중괄호 없음{}

엄격한 들여쓰기를 따름

세미콜론 없음;

파일 확장자는 .sass입니다.

mixin을 만들기 위해 = 기호

를 사용합니다.

mixin을 사용하려면 앞에 + 기호가 옵니다

.

디자이너 및 개발자 커뮤니티 확대

SCSS

SCSS는 CSS3 구문의 상위 집합입니다.

SCSS에는 CSS와 유사한 구문이 있습니다.

모든 유효한 CSS3 스타일시트는 유효한 SCSS이기도 합니다.

추가 구문 제약 조건

중괄호 사용{}

세미콜론 사용;

파일 확장자는 .scss입니다.

mixin을 만들기 위해 @mixin 지시문

을 사용합니다.

mixin을 사용하려면 @include 지시문

이 앞에 옵니다.

소규모 디자이너 및 개발자 커뮤니티

SASS 예제

$prim-color: red

=my-border($sec-color)
  border: 1px solid $sec-color

body
  background: $prim-color
  +my-border(green)

p
  color: $prim-color

SCSS 예

$prim-color: red;

@mixin my-border($sec-color) {
  border: 1px solid $sec-color;
}

body {
  background: $prim-color;
  @include my-border(green);
}

p {
  color: $prim-color;
}

출력 CSS

body {
  background: red;
  border: 1px solid green;
}

p {
  color: red;
}

모아잠 알리 팔로우

Hi there, I am Moazam Ali, a Frontend Engineer based in Pakistan. Having around 2+ years of experience in frontend development.