SCSS와 Sass의 차이점은 무엇입니까?

내가 읽은 것에서 Sass는 변수 및 수학 지원으로 CSS를 더욱 강력하게 만드는 언어입니다.

SCSS와의 차이점은 무엇입니까? 같은 언어로되어 있습니까? 비슷한? 다른?

Sass는 구문이 향상된 CSS 전 처리기입니다. 고급 구문의 스타일 시트는 프로그램에서 처리되어 일반 CSS 스타일 시트로 바뀝니다. 그러나 CSS 표준 자체를 확장 하지는 않습니다 .

CSS 변수가 지원되며 전 처리기 변수뿐만 아니라 활용 될 수 있습니다.

SCSS와 Sass의 차이점을 위해 Sass 문서 페이지 의이 텍스트는 다음 질문에 답해야합니다.

Sass에는 두 가지 구문이 있습니다. SCSS (Sassy CSS)라고하며이 참조에서 사용되는 첫 번째는 CSS 구문의 확장입니다. 이는 모든 유효한 CSS 스타일 시트가 동일한 의미를 가진 유효한 SCSS 파일임을 의미합니다. 이 구문은 아래 설명 된 Sass 기능으로 향상되었습니다. 이 구문을 사용하는 파일의 확장자 는 .scss 입니다.

들여 쓰기 된 구문 (또는 때로는 "Sass")으로 알려진 두 번째 및 이전 구문 은 CSS를보다 간결하게 작성하는 방법을 제공합니다. 선택기의 중첩을 나타 내기 위해 대괄호 대신 들여 쓰기를 사용하고 속성을 구분하기 위해 세미콜론 대신 개행을 사용합니다. 이 구문을 사용하는 파일의 확장자 는 .sass 입니다.

그러나이 모든 것은 결국 CSS를 만드는 Sass 프리 컴파일러에서만 작동합니다. CSS 표준 자체의 확장이 아닙니다.

저는 Sass를 만드는 데 도움을 준 개발자 중 한 사람입니다.

차이점은 UI입니다. 텍스트 외부에서 동일합니다. 이것이 sass와 scss 파일이 서로를 가져올 수있는 이유입니다. 실제로 Sass에는 scss, sass, CSS 등 4 가지 구문 분석기가 있습니다. 이들 모두는 다른 구문을 추상 구문 트리 로 변환하며,이 구문 은 CSS 출력으로 또는 sass-convert 도구를 통해 다른 형식 중 하나로 추가 처리됩니다.

가장 좋아하는 구문을 사용하십시오. 둘 다 완전히 지원되며 나중에 마음이 바뀌면 나중에 변경할 수 있습니다.

Sass .sass파일은 파일과 시각적으로 다릅니다 .scss. 예 :

Example.sass-sass는 이전 구문입니다

$color: red

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

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

Example.scss-sassy css는 Sass 3의 새로운 구문입니다.

$color: red;

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

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

확장자를에서 .css로 변경하여 유효한 모든 CSS 문서를 Sassy CSS (SCSS)로 변환 할 수 있습니다 .scss.

Sass ( 구문 적으로 멋진 StyleSheets )에는 두 가지 구문이 있습니다.

• 최신 : SCSS ( Sassy CSS )
• 이전의 원본 : 들여 쓰기 구문은 원본 Sass 이며 Sass 라고도 합니다.

따라서 두 가지 가능한 구문 이있는 Sass 전 처리기의 일부입니다 .

SCSS 와 원본 Sass 의 가장 중요한 차이점 :

SCSS :

• 구문은 CSS 와 비슷합니다 (따라서 모든 일반 유효한 CSS3 도 유효한 SCSS 이지만 다른 방향으로의 관계는 분명히 일어나지 않습니다)

• 중괄호 사용 {}

• 세미콜론 사용 ;
• 할당 부호는 :
• 믹스 인 을 만들려면 @mixin지시문을 사용합니다.
• mixin 을 사용하려면 @include지시문 앞에옵니다.
• 파일 확장자 는 .scss 입니다.

오리지널 Sass :

• 구문은 Ruby 와 유사합니다
• 중괄호 없음
• 들여 쓰기 없음
• 세미콜론 없음
• 할당 부호 =대신:
• 믹스 인을 만들려면 =부호를 사용합니다
• 믹스 인 을 사용하려면 +기호 앞에옵니다
• 파일 확장자 는 .sass 입니다.

어떤 사람들 은 원래 구문 인 Sass를 선호 하고 다른 사람들은 SCSS를 선호합니다 . 어느 쪽이든, 그러나 Sass의 들여 쓰기 된 구문은 사용되지 않았으며 결코 사용되지 않을 것 입니다.

로 변환 말대꾸 - 변환 :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Sass 및 SCSS 설명서

문법은 다르며, 주요 프로 (또는 관점에 따라 단점)입니다.

나는 다른 사람들이 말한 것을 많이 반복하지 않고, 쉽게 구글을 할 수는 있지만, 때로는 동일한 프로젝트에서 두 가지를 사용한 경험에서 몇 가지를 말하고 싶습니다.

SASS 프로

• 클리너-파이썬, 루비 (심볼과 같은 구문으로 소품을 작성할 수 있음) 또는 CoffeeScript 세계에서 온다면 믹스 인, 함수 및 일반적으로 재사용 가능한 물건을 작성하는 .sass것이 훨씬 더 쉬워집니다. ' .scss(주관적) 보다 읽을 수 있습니다.

SASS 단점

• 공백에 민감한 (주관적), 나는 다른 언어로 신경 쓰지 않지만 여기서 CSS에서는 나를 귀찮게합니다 (문제 : 복사, 탭 대 우주 전쟁 등).
• 인라인 규칙이 없습니다 (이것은 나를 위해 게임 속보였습니다) body color: red. .scss에서 할 수있는 것처럼 할 수 없습니다body {color: red}
• 다른 벤더 자료를 가져 와서 바닐라 CSS 스 니펫 복사-불가능하지는 않지만 시간이 지나면 지루합니다. 해결책은 프로젝트에 .scss파일 (파일과 함께 .sass)을 두거나로 변환하는 것 .sass입니다.

이것 이외에-그들은 같은 일을합니다.

이제 내가하고 싶은 것은 가능한 경우 .sass실제로 CSS로 컴파일 할 믹스 인과 변수 및 코드를 작성하는 것입니다 .scss(예 : Visual Studio는 지원하지 않지만 .sassRails 프로젝트에서 작업 할 때마다 보통 두 가지를 결합하지 않습니다. 하나의 파일에서 c).

최근에 나는 Stylus 에게 두 가지 구문을 하나의 파일에 결합시킬 수 있기 때문에 (풀 타임 CSS 전 처리기) 기회를 고려 하고 있습니다. 그것은 팀에게 좋은 방향이 아닐 수도 있지만 혼자서 유지할 때는 괜찮습니다. 스타일러스는 구문에 문제가있을 때 실제로 가장 유연합니다.

그리고 마침내위한 믹스 인 .scss대 .sass구문 비교 :

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

로부터 언어의 홈페이지

Sass에는 두 가지 구문이 있습니다. Sass 3의 새로운 주요 구문은“SCSS”(“Sassy CSS”의 경우)라고 하며 CSS3 구문의 상위 집합입니다. 이것은 모든 유효한 CSS3 스타일 시트도 유효한 SCSS임을 의미합니다. SCSS 파일은 .scss 확장자를 사용합니다.

두 번째로 오래된 구문은 들여 쓰기 된 구문 (또는 "Sass")이라고합니다. Haml의 간결함에서 영감을 얻은이 글은 CSS와의 유사성보다 간결성을 선호하는 사람들을위한 것입니다. 대괄호와 세미콜론 대신 줄 들여 쓰기를 사용하여 블록을 지정합니다. 더 이상 기본 구문은 아니지만 들여 쓰기 된 구문은 계속 지원됩니다. 들여 쓰기 된 구문의 파일은 확장명 .sass를 사용합니다.

SASS는 CSS를 뱉어내는 해석 언어입니다. 사스의 구조는 보이는 CSS (원격)처럼,하지만 설명은 오해의 소지가 조금 것을 나에게 보인다; 그건 하지 CSS를 대체하거나 확장. CSS는 결국 CSS를 뱉어내는 인터프리터이므로 Sass에는 여전히 일반적인 CSS의 한계가 있지만 간단한 코드로 마스킹합니다.

기본적인 차이점은 구문입니다. SASS에는 공백이 있고 세미콜론이없는 느슨한 구문이 있지만 SCSS는 CSS와 더 유사합니다.

SASS는 Syntaxtically Awesome StyleSheets의 약자입니다. 기본 언어에 힘과 우아함을 더하는 CSS의 확장입니다. SASS는 새로 추가 된 SCSS로 명명되었지만 이전 SASS도 있습니다. SCSS 또는 SASS를 사용하기 전에 아래 차이점을 참조하십시오.

일부 SCSS 및 SASS 구문의 예는 다음과 같습니다.

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

SASS

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

컴파일 후 출력 CSS (둘 다 동일)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

자세한 내용은 공식 웹 사이트를 참조하십시오 .

Sass가 첫 번째였으며 구문은 약간 다릅니다. 예를 들어, 믹스 인 포함 :

Sass: +mixinname()
Scss: @include mixinname()

Sass는 중괄호와 세미콜론을 무시하고 중첩에 누워 있습니다.

SASS와 SCSS 의 차이점 기사에서 자세한 차이점을 설명합니다. SASS 및 SCSS 옵션에 혼동하지 마십시오. 처음에는 .scss는 Sassy CSS이며 차세대 .sass입니다.

이것이 의미가 없다면 아래 코드의 차이점을 볼 수 있습니다.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

위 코드에서 우리는; 선언을 분리합니다. 이 점을 더 자세히 설명하기 위해 .border에 대한 모든 선언을 한 줄에 추가했습니다. 대조적으로, 아래의 SASS 코드는 들여 쓰기가있는 다른 행에 있어야하며;를 사용하지 않습니다.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

아래 CSS에서 SCSS 스타일이 이전 SASS 방식보다 일반 CSS와 훨씬 유사하다는 것을 알 수 있습니다.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

요즘 누군가가 Sass와 함께 일하고 있다고 말하면 전통적인 .sass 방식이 아닌 .scss로 작성하는 것을 말합니다.

원본 sass은 루비, 옥 등과 비슷한 루비 구문과 유사합니다.

이 구문에서는을 사용하지 않고 {}공백을 사용하고 사용법도 사용하지 않습니다 ;...

에서 scss구문 더처럼 CSS,하지만 같은 더 많은 옵션을 점점 : 비슷한에, 등, 중첩 선언 less등의 사전 처리 CSS...

그들은 기본적으로 같은 일을하지만 난에서 구문 차이, 모양을 보려면 각 라인의 몇 가지를 넣어 {}, ;및 spaces:

SASS :

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS :

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

간단한 답변 :

SCSS는 Sass CSS 프리 프로세서에서 지원하는 기본 구문을 나타냅니다 .

• 로 끝나는 파일 .scss은 Sass에서 지원하는 표준 구문 을 나타냅니다. SCSS는 CSS의 상위 집합입니다.
• 로 끝나는 파일 .sass은 Ruby 세계에서 시작된 Sass가 지원하는 "이전"구문 을 나타냅니다.

SASS는 Syntaxtically Awesome Style Sheets이며 CSS의 확장이며 중첩 규칙, 상속, Mixins의 기능을 제공하는 반면 SCSS는 CSS와 유사한 Sassy Cascaded Style Sheets이며 CSS와 SASS 간의 차이와 비 호환성을 채 웁니다. MIT 라이센스에 따라 라이센스가 부여되었습니다. 이 기사에는 차이점에 대한 자세한 내용이 있습니다. https://www.educba.com/sass-vs-scss/