SCSS 기본 문법과 사용법, 내장함수

 

1. SCSS 기본 구조와 중첩 문법

SCSS에서는 CSS처럼 단순히 선택자와 속성을 나열하는 대신, HTML의 계층 구조를 반영하여 중첩(nesting)을 사용할 수 있습니다.

 

 

예시 :

.parent {
  color: blue;

  .child {
    font-size: 16px;
    margin: 10px;
  }

  &.active {
    background-color: yellow;
  }
}

 

컴파일된 CSS 결과 :

.parent {
  color: blue;
}
.parent .child {
  font-size: 16px;
  margin: 10px;
}
.parent.active {
  background-color: yellow;
}

 

---

 

2. SCSS 작성 시 주요 문법과 사용법

(1) 중첩

HTML 구조를 반영하여 스타일을 계층적으로 작성할 수 있습니다.

.nav {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

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

        &:hover {
          color: red;
        }
      }
    }
  }
}

&를 사용해 :hover, :focus 같은 가상 선택자(pseudo-class)를 부모와 연결 가능.

 

반응형

(2) 변수

반복 사용되는 값을 변수로 저장해 재사용 가능.

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  border: 1px solid $primary-color;
}

 

(3) 연산

색상, 크기 등에 대해 계산 가능.

$base-size: 10px;

.container {
  width: $base-size * 2; // 20px
  padding: $base-size + 5px; // 15px
}

 

(4) 믹스인

재사용 가능한 스타일 블록을 정의.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
  height: 100px;
}

 

(5) 상속

클래스 간 스타일을 공유.

.message {
  padding: 10px;
  border: 1px solid #ccc;
}

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

 

(6) 조건문과 반복문

프로그래밍적인 로직 추가 가능.

@for $i from 1 through 3 {
  .col-#{$i} {
    width: $i * 10%;
  }
}

결과: .col-1, .col-2, .col-3 클래스가 각각 10%, 20%, 30% 너비로 생성.

 

---

SCSS 내장 함수

 

1. 색상 함수

색상을 조작하거나 새로운 색상을 생성하는 데 사용됩니다.

(1) rgb($red, $green, $blue) / rgba($red, $green, $blue, $alpha)

• RGB 또는 RGBA 형식으로 색상을 생성.
• 예시:

$color: rgb(255, 0, 0); // 빨강
$color-alpha: rgba(255, 0, 0, 0.5); // 반투명 빨강

 

(2) hsl($hue, $saturation, $lightness) / hsla($hue, $saturation, $lightness, $alpha)

• HSL(색상, 채도, 명도) 형식으로 색상 생성.
• 예시:

$color: hsl(120, 100%, 50%); // 초록

 

(3) adjust-hue($color, $degrees)

• 색상의 hue(색조)를 조정.
• 예시:

$base: #3498db;
$adjusted: adjust-hue($base, 90deg); // 색조 90도 변경

 

(4) lighten($color, $amount) / darken($color, $amount)

• 색상을 밝게 또는 어둡게 조정.
• $amount: 0% ~ 100% 사이 값.
• 예시:

$base: #3498db;
.light { color: lighten($base, 20%); } // 더 밝은 파랑
.dark { color: darken($base, 20%); }  // 더 어두운 파랑

 

(5) saturate($color, $amount) / desaturate($color, $amount)

• 색상의 채도(saturation)를 높이거나 낮춤.
• 예시:

$base: #3498db;
$vivid: saturate($base, 30%); // 더 선명하게
$dull: desaturate($base, 30%); // 덜 선명하게

 

(6) opacify($color, $amount) / transparentize($color, $amount)

• 색상의 불투명도를 높이거나 낮춤(투명도 조정).
• 예시:

$base: rgba(255, 0, 0, 0.5);
$opaque: opacify($base, 0.3); // 불투명도 증가
$transparent: transparentize($base, 0.3); // 투명도 증가

 

(7) mix($color1, $color2, [$weight])

• 두 색상을 섞음. $weight는 첫 번째 색상의 비율(기본값 50%).
• 예시:

$mixed: mix(#ff0000, #0000ff, 70%); // 빨강 70%, 파랑 30%

 

 

2. 수학 함수

수치 연산을 지원합니다.

 

(1) round($number)

• 숫자를 가장 가까운 정수로 반올림.
• 예시:

$value: round(15.7); // 16

 

(2) ceil($number) / floor($number)

• 올림(ceil) 또는 내림(floor).
• 예시:

$ceil: ceil(15.2); // 16
$floor: floor(15.8); // 15

 

(3) percentage($number)

• 숫자를 퍼센트로 변환.
• 예시:

$percent: percentage(0.75); // 75%

 

(4) min($number1, $number2, ...) / max($number1, $number2, ...)

• 여러 값 중 최소값(min) 또는 최대값(max) 반환.
• 예시:

$min: min(10px, 20px, 5px); // 5px
$max: max(10px, 20px, 5px); // 20px

 

(5) random([$limit])

• 1부터 $limit까지의 랜덤 정수 반환(기본은 1~100).
• 예시:

$rand: random(50); // 1~50 사이 랜덤 값

 

 

3. 문자열 함수

문자열을 조작합니다.

 

(1) to-upper-case($string) / to-lower-case($string)

• 문자열을 대문자 또는 소문자로 변환.
• 예시:

$upper: to-upper-case("hello"); // "HELLO"
$lower: to-lower-case("WORLD"); // "world"

 

(2) str-length($string)

• 문자열의 길이 반환.
• 예시:

$length: str-length("hello"); // 5

 

(3) str-insert($string, $insert, $index)

• 문자열의 특정 위치에 새 문자열 삽입.
• 예시:

$new: str-insert("hello", " world", 6); // "hello world"

 

 

4. 리스트 함수

SCSS에서 리스트(공백이나 쉼표로 구분된 값 집합)를 다룹니다.

 

(1) length($list)

• 리스트의 길이 반환.
• 예시:

$list: 10px 20px 30px;
$len: length($list); // 3

 

(2) nth($list, $n)

• 리스트에서 n번째 항목 반환(1부터 시작).
• 예시:

$list: red green blue;
$color: nth($list, 2); // green

 

(3) append($list, $val, [$separator])

• 리스트에 값 추가.
• 예시:

$list: 10px 20px;
$new-list: append($list, 30px); // 10px 20px 30px

 

(4) get-map(name, value)

• 1개의 변수에 여러 개의 값을 선언.
• 예시:

$color: (
    primary: #333,
    secondary: #666,
    focus: #ff0000
);

body {
    color: get-map($color, primary);
}

h1 {
    color: get-map($color, focus);
}

 

5. 유용한 기타 함수

(1) if($condition, $if-true, $if-false)

• 조건문처럼 동작.
• 예시:

$value: if(true, 10px, 20px); // 10px

 

(2) unit($number)

• 값의 단위 반환.
• 예시:

$unit: unit(10px); // "px"

 

(3) quote($string) / unquote($string)

• 문자열에 따옴표를 추가하거나 제거.
• 예시:

$quoted: quote(hello); // "hello"
$unquoted: unquote("hello"); // hello