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

질문자 :bruno077

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

SCSS와의 차이점은 무엇입니까? 같은 언어라고 해야 할까요? 비슷한? 다른?

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

CSS 변수가 지원되고 활용될 수 있지만 전처리기 변수만큼은 아닙니다.

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

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

indented syntax (or sometimes just “Sass”) 알려진 두 번째 및 이전 구문 은 CSS를 작성하는 보다 간결한 방법을 제공합니다. 선택기의 중첩을 나타내기 위해 대괄호 대신 들여쓰기를 사용 하고 속성을 구분하기 위해 세미콜론 대신 줄 바꿈 을 사용합니다. 이 구문을 사용하는 파일의 확장자는 .sass 입니다.

그러나 이 모든 것은 결국 CSS를 생성하는 all this works only with the Sass pre-compiler CSS 표준 자체의 확장이 아닙니다.

anon

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

차이점은 구문입니다. 텍스트 외부 아래에서 그들은 동일합니다. 이것이 sass 및 scss 파일이 서로를 가져올 수 있는 이유입니다. 실제로 Sass에는 scss, sass, CSS 등의 네 가지 구문 파서가 있습니다. 이 모든 것은 다른 구문을 추상 구문 트리 로 변환하여 CSS 출력 또는 sass-convert 도구를 통해 다른 형식 중 하나로 추가 처리됩니다.

가장 좋아하는 구문을 사용하세요. 둘 다 완벽하게 지원되며 마음이 바뀌면 나중에 변경할 수 있습니다.

chriseppstein

사스 .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 에서 .scss 로 변경하기만 하면 Sassy CSS(SCSS)로 변환할 수 있습니다.

Anthuan Vásquez

Sass ( Syntactically Awesome StyleSheets )에는 두 가지 구문이 있습니다.

• 최신 버전: SCSS ( Sassy CSS )
• 그리고 더 오래된 original: indent 구문은 원래 Sass 이며 Sass 라고도 합니다.

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

SCSS 와 원본 Sass 의 가장 중요한 차이점은 다음과 같습니다.

SCSS :

• 구문은 CSS 와 유사합니다(모든 일반 유효한 CSS3 도 유효한 SCSS 이지만 다른 방향의 관계는 분명히 발생하지 않습니다)

• 중괄호 {}

• 세미콜론 사용 ;

• 할당 기호는 :

• 믹스인 을 생성하려면 @mixin 지시문을 사용합니다.

• mixin 을 사용하려면 @include 지시문이 앞에 옵니다.

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

오리지널 사스 :

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

어떤 사람들은 원래 구문인 Sass를 선호하고 다른 사람들은 SCSS를 선호합니다. 어느 쪽이든, 그러나 Sass의 들여쓰기된 구문은 사용되지 않았으며 앞으로도 사용되지 않을 것이라는 점은 주목할 가치가 있습니다. (보관소)

sass-convert를 사용한 전환 :

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

Sass 및 SCSS 문서

simhumileco

구문이 다르며 이것이 주요 장점(또는 관점에 따라 단점)입니다.

나는 다른 사람들이 말한 것을 많이 반복하지 않으려고 노력할 것입니다. 당신은 그것을 쉽게 구글링할 수 있지만, 그 대신에, 때로는 같은 프로젝트에서도 두 가지를 모두 사용한 경험에서 몇 가지를 말하고 싶습니다.

SASS 프로

• 청소기 -에 유지 mixin, 기능, 일반적으로 어떤 재사용 가능한 물건을 쓰기 - 파이썬, 루비에서 오는 경우 또는 심지어 커피 스크립트의 세계, 그것은 당신에게 매우 자연스러운 올 것이다 (당신도 구문과 같은 기호가-와 소품을 쓸 수 있습니다) .sass 많이 .scss 보다 '쉽고' 읽기 쉽습니다(주관적).

SASS 단점

• 공백에 민감(주관적), 다른 언어에서는 신경 쓰지 않지만 여기 CSS에서는 귀찮게 합니다(문제: 복사, 탭 대 공간 전쟁 등).
• 인라인 규칙이 없습니다(이것은 저에게 게임 브레이킹이었습니다), 당신은 body {color: red} 에서 할 수 있는 것처럼 body color: red
• 다른 공급업체 항목 가져오기, 바닐라 CSS 스니펫 복사 - 불가능하지는 않지만 시간이 지나면 매우 지루합니다. 이 중 하나에이 솔루션은 .scss (함께 가진 파일을 .sass 파일) 프로젝트 또는로 변환하는 .sass .

이 외에는 동일한 작업을 수행합니다.

자, 내가하고 싶은 것은에서 쓰기 유지 mixin 변수이다 .sass 사실에 CSS로 컴파일 및 코드 .scss 가능 (예 : 비주얼 스튜디오에 대한 지원이없는 경우 .sass 나는 레일 프로젝트 평소에 일을 할 때마다하지만, 하나의 파일이 아닌 두 개를 결합하십시오. ofc).

최근에 저는 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

Drops

언어의 홈페이지에서

Sass에는 두 가지 구문이 있습니다. 새로운 기본 구문(Sass 3 현재)은 "SCSS"("Sassy CSS"용)로 알려져 있으며 CSS3 구문의 상위 집합입니다. 이는 모든 유효한 CSS3 스타일시트도 유효한 SCSS임을 의미합니다. SCSS 파일은 .scss 확장자를 사용합니다.

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

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

Blender

SASS는 Syntactically 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); }

더 많은 가이드는 공식 웹사이트를 참조하세요.

Srikrushna

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

designerNProgrammer

Sass가 처음이었고 구문이 약간 다릅니다. 예를 들어 믹스인 포함:

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

Sass는 중괄호와 세미콜론을 무시하고 중첩에 배치하므로 더 유용합니다.

user3522940

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로 작성하는 것을 의미한다고 생각합니다.

Shailesh Vikram Singh

원래 sass 는 ruby 구문과 유사하며 ruby, jade 등과 유사합니다.

이러한 구문에서는 {} 사용하지 않고 대신 공백을 사용하고 ; ...

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; }

Alireza

간결한 답변:

SCSS는 Sass CSS 전처리기가 지원하는 기본 구문을 나타냅니다 .

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

matthias

SASS는 Syntactically Awesome Style Sheets이며 중첩 규칙, 상속, Mixins의 기능을 제공하는 CSS의 확장인 반면 SCSS는 CSS와 유사하고 CSS와 SASS 간의 격차와 비호환성을 채우는 Sassy Cascaded Style Sheets입니다. MIT 라이선스에 따라 라이선스가 부여되었습니다. 이 문서에서는 차이점에 대해 자세히 설명합니다. https://www.educba.com/sass-vs-scss/

Shashiwadana

SCSS는 Sass의 새로운 구문입니다. 확장의 경우 SASS의 경우 .sass이고 SCSS의 경우 .scss입니다. 여기서 SCSS는 SASS보다 코딩에 대해 더 논리적이고 복잡한 접근 방식을 가지고 있습니다. 따라서 소프트웨어 분야의 초보자에게는 SCSS가 더 나은 선택입니다.

shalitha anuradha

같은 것을 궁금해하고 Harvard의 CS50 에서 간단한 설명을 우연히 발견했습니다.

Sass라고 하는 언어는 ... (이는) 본질적으로 CSS의 확장입니다... CSS에 추가 기능을 추가합니다... 우리가 사용할 수 있도록 조금 더 강력하게 만들기 위한 것입니다.

Sass의 주요 기능 중 하나는 변수를 사용하는 기능입니다.

Sass 확장자는 .scss (일반 CSS 파일의 경우 .css 와 반대).

따라서 "scss와 sass의 차이점은 무엇입니까?"라고 물을 때 - 대답은 단순히 .scss가 일반 CSS 대신 Sass를 사용하고자 할 때 사용되는 파일 확장자일 수 있습니다.

stevec

출처 : http:www.stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass