source

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

factcode 2023. 7. 13. 21:09
반응형

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

제가 읽은 바로는, Sass는 변수와 수학 지원으로 CSS를 더 강력하게 만드는 언어입니다.

SCSS와 다른 점은 무엇입니까?같은 언어여야 하나요?비슷하다고요?달라요?

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

CSS 변수는 지원되며 사용할 수 있지만 전처리 변수만큼은 사용할 수 없습니다.

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

은 SCSS 확장자를 합니다..scss몇 가지 작은 예외를 제외하고는 CSS의 슈퍼셋이며, 이는 기본적으로 유효한 모든 CSS도 유효하다는 것을 의미합니다.CSS와 유사하기 때문에 가장 익숙해지고 가장 인기 있는 구문입니다.

Sass의 구문이므로 의 파일 합니다..sass이 확장 때문에, 그것은 때때로 "Sass"라고 불립니다.들여쓰기된 구문은 SCSS와 동일한 기능을 모두 지원하지만, 문서 형식을 설명하기 위해 중괄호와 세미콜론 대신 들여쓰기를 사용합니다.

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

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

차이점은 구문입니다.텍스트 외부 아래에서는 동일합니다.이것이 sass와 scss 파일이 서로 가져올 수 있는 이유입니다.사실 Sass에는 4개의 구문 파서가 있습니다: scss, sass, CSS, 이하.이 모든 것은 다른 구문을 추상 구문 트리로 변환하고 CSS 출력으로 추가 처리하거나 sass-convert 도구를 통해 다른 형식 중 하나로 변환합니다.

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

사스 사스.sass파일이 시각적으로 다음과 다릅니다..scss 예:

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

$color: red

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

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

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

$color: red;

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

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

는 유한효 CSS 문서같에서 CSS CSS할 수 ..css.scss.

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

  • 최신 버전: SCSS(Sassy CSS)
  • 그리고 더 오래된, 원래: 들여쓰기 구문, 즉 원래 Sass이며 Sass라고도 합니다.

따라서 둘 다 가능한 두 가지 구문을 가진 Sass 전처리기의 일부입니다.

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

SCSS:

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

  • {}

  • 을 합니다.;

  • 할당 기호는 다음과 같습니다.:

  • 혼합을 만들려면 다음을 사용합니다.@mixin

  • mix를 사용하기 전에 mix를 사용합니다.@include

  • 파일 확장명은 .scss입니다.

원본 Sass:

  • 구문이 Ruby와 유사합니다.
  • 교정기 없음
  • 엄격한 들여쓰기 없음
  • 세미콜론 없음
  • 할당 기호는 다음과 같습니다.=에 :
  • 혼을만면사용다니합다음을들려를 합니다.=서명하다
  • mix를 사용하기 전에 mix를 사용합니다.+서명하다
  • 파일 확장명은 .sass입니다.

일부는 원래 구문인 Sas를 선호하는 반면, 다른 일부는 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 설명서

구문이 다르고, 그것이 주요 프로(또는 당신의 관점에 따라 단점)입니다.

저는 다른 사람들이 말한 것을 반복하지 않도록 노력할 것입니다. 여러분은 쉽게 구글을 검색할 수 있지만, 대신에, 저는 두 가지를 사용한 경험에서 몇 가지를 말하고 싶습니다. 때로는 같은 프로젝트에서도요.

SAS 프로

  • cleaner - Python, (으로 소품을 쓸) CoffeeScript, 은 당신에게입니다 - 으로 cleaner에 것들을 쓰는 것 - 만이당 Python, Ruby (심과유구있수쓸소음로한도으볼문품을사세또약신면사라온믹는이람인스계서에심script,▁cleaner▁(▁ruby▁reusable▁python▁in있음▁-)▁stuff구-수▁-이▁any만▁cleaner약)▁and쓸 기능 및 일반적으로 재사용 가능한 모든 것을 쓰는 것이 당신에게 매우 자연스럽게 다가올 것입니다..sass에서보다 훨씬 더 '상징적'이고 읽을 수 있습니다..scss(주관적).

SAS의 단점

  • 공백에 민감합니다(주관적). 다른 언어로는 상관없지만 여기 CSS에서는 신경이 쓰입니다(복사, 탭 대 우주 전쟁 등).
  • 인라인 규칙은 없습니다(이것은 저에게 있어 게임 브레이크였습니다), 당신은 할 수 없습니다.body color: red..scss에서 할 수 처럼.body {color: red}
  • 다른 벤더 물건 가져오기, 바닐라 CSS 스니펫 복사 - 불가능하지는 않지만 시간이 지나면 매우 지루합니다.해결책은 다음 중 하나입니다..scss으로 표시).sass하거나 "파일"로합니다..sass.

이것 말고는 - 그들은 같은 일을 합니다.

자, 제가 좋아하는 것은 믹스인과 변수를 쓰는 것입니다..sass는 그고로실코드는할파컴리일제로▁that▁and는..scss경우 (즉, Visual Studio를 .).sass하지만 Rails 프로젝트에서 작업할 때는 보통 하나의 c 파일이 아닌 두 개를 결합합니다.

최근에 저는 스타일러스에게 (풀타임 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를 뱉어내는 해석된 언어입니다.Sass의 구조는 (원격으로) CSS처럼 보이지만, 제가 보기에는 설명이 약간 오해의 소지가 있는 것 같습니다. CSS를 대체하거나 확장한 것이 아닙니다.결국 CSS를 뱉어내는 인터프리터이기 때문에 Sass는 여전히 일반 CSS의 한계를 가지고 있지만 간단한 코드로 마스킹합니다.

SASS는 통사적으로 멋진 스타일시트의 약자입니다.기본 언어에 힘과 우아함을 더한 CSS의 확장입니다.SCSS는 일부 변경 사항이 있는 SCSS로 새로 이름이 지정되었지만 이전의 SASS도 있습니다.SCSS 또는 SASS를 사용하기 전에 아래의 차이점을 확인하십시오.

enter image description here

일부 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는 공백이 있고 세미콜론이 없는 느슨한 구문을 가지고 있지만 SCSS는 CSS와 더 유사합니다.

Sass가 첫 번째였고, 구문이 조금 다릅니다.예를 들어, 혼합물을 포함합니다.

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

Sass는 대괄호와 세미콜론을 무시하고 둥지를 틀어서 더 유용하다는 것을 알게 되었습니다.

SASS와 SCSS의 차이는 세부 사항의 차이를 설명합니다.SAS와 SCSS 옵션으로 혼동하지 마십시오. 비록 저도 처음에는 그랬지만 .scss는 Sass 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에 대한 모든 선언을 한 줄에 추가했습니다.이와 대조적으로 아래의 SAS 코드는 들여쓰기가 있는 다른 줄에 있어야 하며;를 사용하지 않습니다.

/* 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 스타일이 이전의 SAS 접근 방식보다 일반 CSS와 훨씬 더 유사하다는 것을 알 수 있습니다.

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

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

저는 요즘 누군가가 Sass와 함께 일하고 있다고 언급하면 대부분 전통적인 .sass 방식이 아닌 .scss로 작성하는 것을 의미한다고 생각합니다.

원의래sass루비 구문과 비슷하고 루비, 옥 등과 유사합니다.

이 구문들에서, 우리는 사용하지 않습니다.{}대신에 우리는 흰색 공간으로 갑니다, 또한 사용하지 않습니다.;...

scss은 은문더유니다합사구▁like에 더 가깝습니다.CSS을 더 과 같습니다.less 기타 처리전사CSS...

그들은 기본적으로 같은 일을 하지만, 저는 구문의 차이를 보기 위해 각각의 행을 두어 개씩 넣었습니다.{},;,그리고.spaces:

SAS:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

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

간결한 답변:

SCSS는 Sass CSS 프리프로세서가 지원하는 주요 구문을 참조합니다.

  • 로 끝나는 .scssSass에서 지원하는 표준 구문을 나타냅니다. SCSS는 CSS의 상위 집합입니다.
  • 로 끝나는 .sassRuby 월드에서 시작된 Sass에서 지원하는 "이전" 구문을 나타냅니다.

TL;DR

둘 다 Sass이지만 컴파일 옵션만 다릅니다.

S(assy) CSS = Sass

SAS를 사용할 수 있는 구문은 하나뿐 아니라 두 가지가 있습니다.한편으로는 "인던트 구문" 또는 간단히 "SASS"라고 불리는 원본 형식을 사용합니다.또한, CSS의 사양에 더 가까운 새로운 변형이 있으며, 따라서 Sassy CSS(Sassy CSS), 즉 SAS 스타일의 CSS라고 불립니다.SASS 버전 3에서는 SCSS가 공식 구문으로 설정되었습니다.가장 큰 차이점은 괄호와 세미콜론의 사용입니다.

바꿈을 하는데, 는 원의래 SAS 구기사하며용바을꿈줄이다, 기다니방입식접모근델반된로링으는을음및문쓰은여들▁on를 모델로 한 입니다.YAML코드 한 줄을 종료하려면 Enter 키를 눌러 줄 바꿈을 수행하면 됩니다.들여쓰기는 태블레이터를 통해 매우 간단하게 작동합니다.따라서 서체의 위치를 변경함으로써 그룹이 형성됩니다. 이른바 선언 블록입니다.이것은 CSS 자체로는 불가능합니다.여기서 그룹화에는 물결 괄호를 사용하고 속성 선언에는 세미콜론을 사용해야 합니다.그리고 이것이 바로 SCSS에 필요한 것입니다.

그래서 SAS와 SCSS 사이의 분쟁이 됩니다.

일부 사용자는 소스 코드의 스니펫을 이동할 때 괄호의 적절한 위치에 주의할 필요가 없고 일반적으로 더 얇고 간결한 코드를 생성하는 원본 SAS의 사용 편의성에 대해 맹세합니다.전체적으로, " 들여쓰기 구문"은 더 적은 문자와 행으로 처리합니다.반면에 SCSS의 지지자들은 추가적인 노력을 기꺼이 받아들입니다. 왜냐하면 그것은 어쨌든 CSS에서 알려진 것과 더 비슷하기 때문입니다.

SCSS는 CSS에 대한 슈퍼셋이며, 이것은 CSS 코드가 기본적으로 SCSS에서도 작동한다는 것을 보장합니다 - 그러나 그 반대는 아닙니다.그럼에도 불구하고, SASS의 기능은 여전히 완전히 포함되어 있습니다.이렇게 하면 두 언어를 동시에 사용하는 것이 더 쉬워집니다.게다가, 이미 CSS로 작업하고 구문에 익숙해진 사람들에게는 전환이 훨씬 쉽습니다.SAS는 두 구문을 모두 지원하지만 프로젝트별로 다음을 선택해야 합니다.다른 형식을 구별할 수 있도록 파일에 확장자를 지정합니다..sass또는.scss.

SASS는 구문적으로 멋진 스타일 시트이며 중첩된 규칙, 상속, 믹스인의 기능을 제공하는 CSS의 확장인 반면 SCSS는 CSS와 유사하고 CSS와 SASS 사이의 격차와 비호환성을 채우는 Sassy Cascaded 스타일 시트입니다.그것은 MIT 라이선스 하에 허가되었습니다.이 기사에는 차이점에 대한 자세한 내용이 나와 있습니다.https://www.educba.com/sass-vs-scss/

SCSS는 SASS입니다.

당신은 그들이 다르다고 말할 수 없습니다.

그렇지만.scss그리고..sass파일은 다른 SAS 구문입니다.

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

  1. 구문SCSS 구문().scss 일반적으로 이 가장 일반적으로 사용됩니다.이것은 CSS의 슈퍼세트입니다. 이것은 유효한 모든 CSS도 유효하다는 것을 의미합니다.

  2. 구문 (들여기구문쓰(▁(문구▁the들▁indented.sass는 더합니다. 문장을 대신 을 구분합니다. ( 합니다특는더이다▁)니▁(는특합이. 문장을 중첩하기 위해 곱슬곱슬한 중괄호 대신 들여쓰기를 사용하고, 문장을 분리하기 위해 세미콜론 대신 새 줄을 사용합니다. (파이썬 구문과 유사합니다.)

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

같은 것을 궁금해하던 나 자신을 발견하고 하버드의 CS50에서 직접적인 설명을 우연히 발견했습니다.

Sass...라고 불리는 언어는 본질적으로 CSS의 확장자입니다.그것은 CSS에 추가 기능을 추가합니다... 단지 우리가 좀 더 강력하게 사용할 수 있도록 하기 위해서입니다.

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

는 Sass 확자는입니다..scss)와 반대로.css일반 CSS 파일의 경우).

그래서 우리가 "scss와 sass의 차이점은 무엇인가?"라고 물었을 때 답은 단순히 .scss가 일반 CSS 대신 Sass를 사용하기를 원할 때 사용되는 파일 확장자일 수 있습니다.

언급URL : https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass

반응형

'source' 카테고리의 다른 글

TestFlight 베타 설치를 통해 iOS 앱이 실행 중인지 런타임에 확인하는 방법  (0) 2023.07.13
C에 대한 최소 해시 함수?  (0) 2023.07.13
포트를 지정할 때 스프링 부트 액추에이터 끝점의 장치 테스트가 작동하지 않음  (0) 2023.07.13
Qt Creator에서 CDB를 구성하는 방법은 무엇입니까?  (0) 2023.07.13
Xcode 9 - "고정 폭 제약으로 인해 클리핑이 발생할 수 있음" 및 기타 현지화 경고  (0) 2023.07.13

'source'의 다른글

  • 현재글SCSS와 Sass의 차이점은 무엇입니까?

관련글

댓글

티스토리툴바