sass
SCSS vs Sass

주요 차이점

사람들은 종종 Sass 를이 CSS 전처리 기의 이름으로 사용하지만 종종 SCSS 구문을 의미합니다. Sass 는 .sass 파일 확장자를 사용하고 SCSS - Sass 는 .scss 확장명을 사용합니다. 그들은 둘 다 "Sass"라고 불립니다.

일반적으로 말하자면 SCSS 구문이보다 일반적으로 사용됩니다. SCSS 는 더 많은 기능을 갖춘 일반 CSS처럼 보이지만 Sass 는 일반 CSS와는 상당히 다르게 보입니다. 두 구문 모두 동일한 능력을가집니다.

통사론

주요 차이점은 Sass 는 SCSS 가있는 중괄호 나 세미콜론을 사용하지 않는다는 것입니다. Sass 는 공백에 민감하므로 정확하게 들여 쓰기해야합니다. SCSS 에서는 원하는대로 규칙을 형식화하고 들여 쓰기 할 수 있습니다.

SCSS :

// nesting in SCSS
.parent {
  margin-top: 1rem;

  .child {
    float: left;
    background: blue;
  }
}

SASS :

// nesting in Sass
.parent
  margin-top: 1rem

  .child
    float: left
    background: blue

컴파일 후에는 다음과 같은 CSS가 생성됩니다.

.parent {
  margin-top: 1rem;
}
.parent .child {
  float: left;
  background: blue;
}

믹스 인

Sass 는 더 "게으른"구문이되는 경향이 있습니다. 믹스 인을 어떻게 정의하고 포함시키는 것보다 더 훌륭하게 설명 할 수는 없습니다.

믹스 인 정의하기

= SCSS @mixin , Sass 에서 mixin을 정의하는 방법입니다.

// SCSS
@mixin size($x: 10rem, $y: 20rem) {
  width: $x;
  height: $y;
}
  
// Sass
=size($x: 10rem, $y: 20rem)
  width: $x
  height: $y

믹스 인 포함

+ 는 Sass 포함하는 방법이며 SCSS @include 를 포함합니다.

// SCSS
.element {
  @include size(20rem);
}

// Sass
.element
  +size(20rem)

지도

지도에 관해서는 일반적으로 SCSS 가 더 쉬운 구문입니다. Sass 는 들여 쓰기 기반이므로지도를 한 줄에 저장해야합니다.

// in Sass maps are "unreadable"
$white: ( white-50: rgba(255, 255, 255, .1), white-100: rgba(255, 255, 255, .2), white-200: rgba(255, 255, 255, .3), white-300: rgba(255, 255, 255, .4), white-400: rgba(255, 255, 255, .5), white-500: rgba(255, 255, 255, .6), white-600: rgba(255, 255, 255, .7), white-700: rgba(255, 255, 255, .8), white-800: rgba(255, 255, 255, .9), white-900: rgba(255, 255, 255, 1 )

SCSS 하여 여러 행의 코드를 형식화 할 수 있으므로 맵을보다 쉽게 ​​읽을 수 있도록 형식을 지정할 수 있습니다.

// in SCSS maps are more readable
$white: (
  white-50: rgba(255, 255, 255, .1),
  white-100: rgba(255, 255, 255, .2),
  white-200: rgba(255, 255, 255, .3),
  white-300: rgba(255, 255, 255, .4),
  white-400: rgba(255, 255, 255, .5),
  white-500: rgba(255, 255, 255, .6),
  white-600: rgba(255, 255, 255, .7),
  white-700: rgba(255, 255, 255, .8),
  white-800: rgba(255, 255, 255, .9),
  white-900: rgba(255, 255, 255, 1)
);

코멘트

Sass vs. Scss의 댓글은 여러 줄을 제외하고는 크게 비슷합니다. SASS 멀티 라인은 들여 쓰기가 민감한 반면 SCSS 는 주석 터미네이터에 의존합니다.

한 줄 주석

style.scss

// Just this line will be commented!
h1 { color: red; }

style.sass

// Exactly the same as the SCSS Syntax!
h1
  color: red

여러 줄 주석

style.scss

개시 자 : /*

터미네이터 : */

/* This comment takes up
 * two lines.
 */
h1 {
   color: red;
}

그러면 h1 요소의 색상이 빨간색으로 지정 됩니다.

style.sass

이제 SASS 에는 두 개의 초기자가 있지만 각각의 터미네이터는 없습니다. SASS 주석은 들여 쓰기 수준에 민감 합니다 .

초 기자 : // 및 /*

// This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

그러면 h1 요소의 색상이 빨간색으로 지정 됩니다.

/* Initiator를 사용하여 동일한 작업을 수행 할 수 있습니다.

/* This is starts a comment,
   and will persist until you 
   return to the original indentaton level.
h1
  color: red

그래서 거기에 당신은 그것을 가지고 있습니다! SCSS 와 SASS 의 주요 차이점!

SCSS와 SASS의 비교

• SCSS 구문은 CSS 구문과 비슷하지만 SASS 구문은 SCSS 약간 다르지만 정확히 동일한 CSS 코드를 생성합니다.
• SASS 에서는 스타일 속성을 세미콜론 ( ; )으로 끝내지 않지만 SCSS에서는 스타일 속성을 ( ; )로 끝냅니다.
• 에서 SCSS 우리는 paranthesis을 사용 {} 스타일 속성을 닫 만에 SASS 우리는 사용하지 않는 paranthesis .
• Indentation 는 SASS 에서 매우 중요합니다. 요소의 class 또는 id 에 중첩 된 속성을 정의합니다.
• scss 에서는 여러 변수를 한 줄로 정의 할 수 있지만 SASS 할 수 없습니다.

for 문법

sass 3.3과 plus 버전의 출시로 인해 @if와 else 조건 문법이 동일 해졌습니다. 우리는 이제 scss 뿐만 아니라 sass 와 함께 표현을 사용할 수 있습니다.

성스러운 구문

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

~에 컴파일 됨

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

scss 구문

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

~에 컴파일

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}