Sass2. sass와 scss의 비교

Front_H·2020년 12월 18일
0

SASS

목록 보기
2/3
post-thumbnail

저번 시간에 Sass의 정의와 설치방법에 대해 알아보았습니다.
이번 시간에는 sass와 scss를 비교하고, 왜 sass를 쓰는지 그 특징을 간략하게 알아보자

sass와 scss 비교

SASS는 두 종류의 파일이 존재합니다. 확장자가 .sass인 SASS 파일과 확장자가
.scss인 SCSS 파일이 있습니다. SASS와 SCSS는 동일한 파일입니다. 하지만 내부
적으로 약간의 차이가 있습니다. 먼저 SASS는 Syntactically Awesome Style Sheet의
준말이며, SCSS는 Sassy Cascading Style Sheet의 준말입니다.
우선 두 파일의 차이점은 중괄호({ })와 세미콜론(;)의 유무라고 할 수 있습니다. SASS 파일은 중괄호와 세미콜론이 존재하지 않고, SCSS는 존재합니다.

우선 SCSS의 문법입니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
 font: 100% $font-stack;
 color: $primary-color;
 }

이제 SASS의 문법 구조입니다.

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
 font: 100% $font-stack
 color: $primary-color

위의 두 문법의 코드는 중괄호와 세미콜론의 유무 이외에는 차이점이
없는 것을 볼 수 있습니다. 이렇게 SASS를 이용하여 CSS를 개발할 때는 두 가지 방식 중
편리한 방식을 사용하면 됩니다. 하지만 두 가지 방법을 혼용할 수는 없습니다. 저는 SCSS가
더 직관적으로 코드를 작성할 수 있어서 SCSS를 쓰고있습니다.

profile
drop the bit 0 and 1

0개의 댓글