sass와 scss의 차이점은 무엇입니까

sass와 scss는 CSS 전처리기 Sass가 제공하는 서로 다른 두 가지 구문으로, 둘 다 유사하고 동일한 작업을 수행하지만 서로 다른 스타일로 작성됩니다. SCSS는 최신이며 Sass보다 나은 것으로 간주됩니다.

먼저 CSS 전처리기 Sass가 제공하는 두 가지 구문인 sass와 scss에 대해 알아봅시다. 들여쓰기 구문이라고도 알려진

sass은 Ruby와 유사한 프로그래밍 언어입니다.

Haml의 단순성에 영감을 받아 Ruby 개발자가 설계하고 작성한 Haml이라는 또 다른 전처리기에서 제공되므로 Sass 스타일시트는 Ruby와 유사한 구문을 사용합니다. 아니요

sass는 CSS와 유사한 단순성을 좋아하는 사람들을 위한 것입니다. 괄호와 세미콜론 대신 줄의 들여쓰기를 사용하여 블록을 지정하므로 괄호가 있고 세미콜론이 없으며 엄격한 들여쓰기가 있습니다. sass 구문의 파일은 .sass 확장자를 사용합니다.

예:

// Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius.my-element
  color= !primary-color
  width= 100%
  overflow= hidden.my-other-element
  +border-radius(5px)

보시다시피 이는 일반 CSS에 비해 상당한 변화입니다! 변수 플래그가 "$"가 아닌 "!"이고, 할당 기호가 ":"가 아닌 "="인데 좀 이상하네요!

그러나 이는 2010년 5월 버전 3.0이 출시되기 전 Sass의 모습이었습니다. 그 후 Sassy CSS가 scss라는 새로운 구문을 도입했습니다. 이 구문은 CSS 친화적인 구문을 도입하여 Sass와 CSS 사이의 격차를 줄이는 것을 목표로 합니다.

scss는 CSS 구문과 유사하고 CSS 표준을 완벽하게 준수합니다.

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}
.my-other-element {
  @include border-radius(5px);
}

scss는 확실히 sass보다 CSS에 더 가깝습니다.

scss와 sass의 차이점

sass 구문은 rubby와 유사하며 대괄호 사용, 엄격한 들여쓰기 및 세미콜론이 없습니다. 변수 기호는 "$" 대신 "!"입니다. 할당 기호는 ":" 대신 "="입니다.

less 구문은 CSS와 유사하며 중괄호와 세미콜론을 사용해야 합니다. 변수 기호는 "$"이고 할당 기호는 ":"입니다.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 sass와 scss의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!