0Pricing
CSS Academy · 강의

Sass 함수 및 제어 흐름

Sass 내장 함수와 @if, @each, @for 지시어를 사용해 동적인 CSS 로직을 작성합니다.

Sass 함수 및 제어 흐름은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

사스 내장 함수

사스는 색상 조작, 수학 계산, 문자열 연산 등을 위한 다양한 내장 함수를 제공합니다. 이러한 함수는 컴파일 시점에 실행됩니다.

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

색상 함수

주요 사스 색상 함수는 다음과 같습니다:

  • darken($color, $amount)
  • lighten($color, $amount)
  • saturate($color, $amount)
  • mix($color1, $color2, $weight)
  • rgba($color, $alpha)
  • color.scale($color, $lightness: 20%)

@function을 사용하는 사용자 지정 함수

값을 반환하는 재사용 가능한 함수를 정의하십시오(CSS 규칙이 아님):

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

@if @else 제어 흐름

변수 값에 따라 조건부로 CSS를 출력하십시오:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

@each 반복

목록이나 맵을 순회하여 여러 규칙을 생성하십시오:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

@for 반복

값의 범위에 따라 CSS를 생성하십시오:

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

@while 반복

조건이 참인 동안 반복합니다. 신중히 사용하십시오 — 대부분의 경우 @each와 @for로 충분합니다:

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

사스 맵

맵은 사스에서 키-값으로 이루어진 데이터 구조입니다:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

사스는 세 가지 진단 기능을 제공합니다:

  • @error: 메시지와 함께 컴파일을 중단함
  • @warn: 중단하지 않고 경고를 기록함
  • @debug: 개발 중 값을 기록함

보간 #{...}

#{$variable}을 사용하여 선택자, 속성 이름 또는 미디어 쿼리에 변수 값을 삽입하십시오:

<p class="element">Interpolated property (#{$property})</p>

빠른 확인

Sass의 @mixin과 Sass의 @function은 어떻게 다릅니까?

복습

Sass에 내장된 색상 함수(darken, lighten, mix)를 사용하면 컴파일 시점에 색상을 조작할 수 있습니다. 사용자 지정 @function은 계산된 값을 반환합니다. @if/@else는 조건부 출력을 추가합니다. @each는 목록과 맵을 반복 처리합니다. @for는 숫자 범위를 반복 처리합니다. 이러한 기능을 사용하면 반복을 최소화하면서 강력하고 DRY한 스타일시트를 작성할 수 있습니다.

자주 묻는 질문

“Sass 함수 및 제어 흐름” 강의는 무료인가요?

네 — “Sass 함수 및 제어 흐름” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Sass 함수 및 제어 흐름”에서 뭘 배우나요?

Sass 내장 함수와 @if, @each, @for 지시어를 사용해 동적인 CSS 로직을 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Sass 함수 및 제어 흐름” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 변수 중첩 및 부분 파일
  2. 믹스인 및 포함
  3. 확장 및 자리 표시자 선택자
  4. Sass 함수 및 제어 흐름
← CSS Academy(으)로 돌아가기