SASS 문법과 SCSS 문법

이 글에서는 SASS 문법과 SCSS 문법에 대해 설명합니다.

SASS와 SCSS 문법의 차이점을 자세히 설명하고, 이해를 돕기 위한 구체적인 예시를 제공합니다.

YouTube Video

SASS 문법과 SCSS 문법

SASS는 CSS의 기능을 확장하기 위해 설계된 스타일시트 언어입니다. SASS에는 두 가지 문법이 있습니다. 바로 SASS 문법과 SCSS 문법입니다.

SASS와 SCSS 개요

SASS 문법

SASS 문법은 다음과 같이 작성됩니다:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• 중괄호 {}나 세미콜론 ;를 사용하지 않고 들여쓰기에 기반한 문법입니다.
• 간결하고 가독성이 높은 코드를 작성할 수 있도록 설계되었습니다.
• 파일 확장자는 .sass입니다.

SCSS 문법

SCSS 문법은 다음과 같이 작성됩니다:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• CSS와 유사하게 중괄호 {}와 세미콜론 ;를 사용하는 문법입니다.
• 기존 CSS 코드와의 호환성이 높아 CSS를 그대로 SCSS 파일로 변환할 수 있습니다.
• 파일 확장자는 .scss입니다.

SASS와 SCSS의 주요 차이점

선택 기준

어느 문법을 사용할지는 프로젝트와 팀의 요구에 따라 다릅니다.

• SASS 문법을 선택할 때

  • SASS 문법은 간결하고 깔끔한 코드 작성을 할 수 있습니다.
  • 팀 전체가 SASS 문법에 익숙하다면 적합한 선택입니다.

• SCSS 문법을 선택할 때

  • CSS와의 호환성이 중요하거나 팀원들이 CSS에 익숙하다면 SCSS 문법이 더 적합합니다.

SASS와 SCSS의 장점

다음은 SASS와 SCSS 문법의 공통적인 장점입니다:.

1. 변수 사용

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• 변수를 사용하면 한 곳에서 스타일을 정의하고 여러 곳에서 재사용할 수 있습니다. 변수의 값만 변경하면 전체 디자인을 일괄적으로 수정할 수 있어 유지보수성이 향상됩니다.

2. 믹스인(Mixin)

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• 믹스인은 여러 곳에서 반복적으로 사용되는 스타일이나 벤더 프리픽스 코드를 그룹화하고, 인자를 사용해 유연하게 적용할 수 있게 해줍니다. 이는 코드 중복을 줄이고 유지보수성을 높입니다.

3. 중첩 규칙

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• 네스팅을 사용하면 HTML 구조에 따라 스타일을 계층적으로 작성할 수 있어 관련 규칙을 쉽게 그룹화할 수 있습니다. 이로 인해 코드의 가독성과 유지보수성이 모두 향상됩니다.

4. 상속

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• 상속을 사용하면 공통 스타일을 그룹화하여 재사용할 수 있습니다. 이로 인해 코드 중복이 줄어들고 일관된 디자인을 유지할 수 있습니다.

결론

SASS와 SCSS 중 어느 것을 선택할지는 개발자의 선호와 프로젝트 요구사항에 달려 있습니다.

SASS 문법은 간결함을, SCSS 문법은 CSS와의 호환성을 강조합니다. 두 문법 모두 강력하며 CSS의 생산성을 크게 높일 수 있습니다.

프로젝트에 가장 적합한 옵션을 선택하면 스타일시트 관리를 효율적으로 할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video