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