SCSS – CSS 워크플로우 강화

이 글에서는 변수, 중첩 규칙, 믹스인, 기능, 그리고 더 많은 것. SCSS를 사용하면 특히 대규모 프로젝트의 경우 CSS 작성 및 유지 관리가 훨씬 쉬워집니다.

---

1. SCSS란 무엇인가요?

SCSS는 널리 사용되는 CSS 전처리기인

Sass(Syntactically Awesome Stylesheets)

의 구문입니다. CSS와 완벽하게 호환되지만 다음과 같은 강력한 기능을 도입하여 작업 흐름을 향상합니다.

변수
중첩
부분 및 가져오기
믹스
상속

---

2. SCSS 변수

SCSS에서는 스타일시트 전체에서 재사용할 수 있는 색상, 글꼴, 간격과 같은 값을 저장하는 변수를 정의할 수 있습니다. 이렇게 하면 코드를 더 쉽게 관리하고 유지 관리할 수 있습니다.

예:

$primary-color: #3498db;
$font-size: 16px;

body {
    font-size: $font-size;
    background-color: $primary-color;
}

설명:

$primary-color는 16진수 색상 코드를 보유하는 변수입니다.

• $font-size는 글꼴 크기 값을 저장합니다.
변수를 사용하면 값을 반복할 필요가 없으며 기본 색상이나 글꼴 크기를 변경해야 하는 경우 한 곳에서 변경할 수 있습니다.

---

3. SCSS에 중첩

기존 CSS에 비해 SCSS의 가장 큰 개선 사항 중 하나는 선택기를 중첩하는 기능입니다. 이는 HTML의 구조를 반영하고 스타일시트를 더욱 체계적으로 유지합니다.

예:

nav {
    background-color: $primary-color;

    ul {
        list-style: none;

        li {
            display: inline-block;
            margin-right: 10px;

            a {
                color: white;
                text-decoration: none;
            }
        }
    }
}

설명:

여기서는

,
• 및 요소는 탐색 선택기 내부에 중첩되어 요소 간의 관계를 명확하게 만듭니다.

---

4. 부분 파일 및 파일 가져오기

대규모 프로젝트에서는 CSS 관리가 지저분해질 수 있습니다. SCSS를 사용하면 스타일을 기본 스타일시트로 가져올 수 있는 더 작은 파일인

부분

으로 나눌 수 있습니다. 부분 파일을 만들려면 파일 이름을 밑줄로 시작하세요(예: _buttons.scss). 그런 다음 이를 기본 파일로 가져올 수 있습니다.

예:

부분을 사용하면 코드를 모듈화하고 관리하기 쉽게 유지할 수 있습니다. 스타일을 _header.scss, _footer.scss 및 _layout.scss와 같은 섹션으로 나눌 수 있습니다.

// In _buttons.scss
.button {
    background-color: $primary-color;
    padding: 10px;
}

// In main.scss
@import 'buttons';

---

5. 믹스인

믹스인은 반복을 방지할 수 있는 재사용 가능한 코드 덩어리입니다. 여기에는 변수와 매개변수가 포함될 수 있으므로 재사용 가능한 구성요소나 스타일을 만드는 데 매우 강력합니다.

예:

@mixin button-style($bg-color, $padding) {
    background-color: $bg-color;
    padding: $padding;
    border: none;
    color: white;
    cursor: pointer;
}

.button-primary {
    @include button-style($primary-color, 10px);
}

.button-secondary {
    @include button-style(#e74c3c, 12px);
}

설명:

@mixin은 스타일 블록을 정의합니다.

• @include 문은 해당 스타일을 다양한 요소에 적용하는 데 사용됩니다.
믹스를 사용하면 매개변수를 통한 맞춤설정이 가능하면서도 코드를 재사용할 수 있어 시간이 절약됩니다.

---

6. Extend를 통한 상속

SCSS는 @extend 지시문을 사용한 상속을 허용하므로 한 선택기가 다른 선택기의 스타일을 상속할 수 있습니다. 이는 중복을 피하고 스타일의 일관성을 유지하는 데 유용합니다.

예:

%message {
    padding: 10px;
    border: 1px solid;
    border-radius: 5px;
}

.success {
    @extend %message;
    border-color: green;
}

.error {
    @extend %message;
    border-color: red;
}

설명:

%message는 공유 스타일이 포함된 자리 표시자 선택기입니다.

• .success 및 .error는 해당 스타일을 확장하고 특정 규칙을 추가합니다.
이렇게 하면 반복이 줄어들고 코드가 DRY(반복하지 마세요) 상태로 유지됩니다.

---

7. 기능

SCSS는 스타일시트 내에서 계산을 수행하거나 값을 조작할 수 있는 기능도 지원합니다. 내장된 SCSS 기능을 사용하거나 직접 정의할 수 있습니다.

예:

$base-spacing: 10px;

@mixin margin-spacing($multiplier) {
    margin: $base-spacing * $multiplier;
}

.box {
    @include margin-spacing(2);  // Outputs: margin: 20px;
}

설명:

margin-spacing 믹스인은 승수를 인수로 사용하고 $base-spacing 변수를 기반으로 마진을 계산합니다.

---

8. 제어 지시문 및 루프

SCSS에는 조건부(@if) 및 루프(@for, @each, @while)와 같은 프로그래밍과 유사한 기능이 포함되어 있어 동적 스타일을 허용합니다.

예:

@mixin generate-columns($count) {
    @for $i from 1 through $count {
        .col-#{$i} {
            width: 100% / $count * $i;
        }
    }
}

@include generate-columns(4);

설명:

이 믹스인은 $count 인수를 기반으로 열 클래스(.col-1, .col-2 등)를 동적으로 생성합니다. @for 루프는 너비 계산을 적용하여 열 수를 반복합니다.

---

9. SCSS 最佳實務

• 保持模組化：使用部分將大型樣式表分解為更小、更易於管理的部分。
• 使用變數：將顏色、間距和字體等常見值定義為變量，以確保樣式的一致性。
• 避免深度嵌套：雖然 SCSS 允許嵌套，但過多的嵌套會使程式碼難以閱讀和維護。堅持 3 或 4 層的深度。
• 使用 mixins 來實現可重複使用性：只要有可能，請使用 mixins 來保持程式碼乾燥。
• 正確命名您的檔案：為您的 SCSS 檔案和部分檔案使用清晰且一致的名稱。

---

結論

在編寫可擴充、可維護的 CSS 方面，SCSS 是一個遊戲規則改變者。它引入了變數、嵌套、混合和繼承等強大的功能，使管理大型專案變得更容易，並避免常見的 CSS 陷阱。透過採用 SCSS，您可以簡化您的開發流程，提高程式碼可讀性，並使您的樣式更易於維護。

---

在 LinkedIn 上關注我 -

裡多伊‧哈桑

위 내용은 SCSS – CSS 워크플로우 강화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!