SCSS 함수와 연산 완벽 가이드 - 동적 스타일시트 작성법

SCSS 함수와 연산은 동적이고 계산된 스타일을 만드는 강력한 도구입니다! 프로그래밍적 사고로 CSS를 작성할 수 있어요. 🎯

SCSS 내장 함수들

SCSS는 색상, 숫자, 문자열, 리스트 등을 다루는 다양한 내장 함수를 제공합니다. 이를 활용하면 복잡한 계산과 조작을 쉽게 할 수 있어요.

색상 조작 함수로 팔레트 자동 생성

수학 함수로 반응형 계산

문자열 함수로 동적 클래스명 생성

리스트/맵 함수로 데이터 구조 활용

색상 함수 활용

동적 색상 팔레트 생성

하나의 기본 색상에서 자동으로 다양한 변형을 만들 수 있습니다! lighten, darken, saturate 등의 함수를 활용해보세요.

// 기본 색상
$primary: #3498db;

// 색상 함수로 팔레트 자동 생성
$primary-light: lighten($primary, 20%);
$primary-dark: darken($primary, 15%);
$primary-saturated: saturate($primary, 30%);
$primary-desaturated: desaturate($primary, 20%);

// 투명도 조절
$primary-alpha: rgba($primary, 0.8);

// 사용 예시
.button {
    background: $primary;
    
    &:hover {
        background: $primary-dark;
    }
    
    &.light {
        background: $primary-light;
    }
}

수학 연산과 계산

반응형 계산 시스템

수학 연산을 활용하면 픽셀 퍼펙트한 반응형 디자인을 구현할 수 있습니다! 복잡한 계산도 SCSS가 자동으로 처리해줘요.

// 기본 설정
$base-font-size: 16px;
$container-width: 1200px;
$grid-columns: 12;

// 계산된 값들
$column-width: $container-width / $grid-columns;
$large-text: $base-font-size * 1.5;
$small-text: $base-font-size * 0.875;

// 그리드 시스템
.col-6 {
    width: percentage(6 / $grid-columns); // 50%
}

.col-4 {
    width: percentage(4 / $grid-columns); // 33.33%
}

함수와 연산의 핵심 포인트

프로그래밍적 사고로 더 스마트한 CSS를 작성할 수 있습니다!

동적 색상 시스템 구축

수학적 계산으로 정확한 레이아웃

함수 조합으로 복잡한 로직 구현

자동화된 스타일 생성

SCSSFunctionsOperations계산

SCSS 함수와 연산 완벽 가이드 – 동적 스타일시트 작성법