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

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

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

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

답변