SASS의 문자열
이 글은 SASS에서의 문자열을 설명합니다.
기본적인 문자열 조작부터 고급 활용 방법까지 SASS에서의 문자열 사용법을 단계별로 설명하겠습니다.
YouTube Video
SASS의 문자열
SASS는 CSS를 확장하기 위한 전처리기이며, 문자열은 스타일 정의를 더욱 유연하고 동적으로 만드는 데 필수적인 요소입니다.
문자열의 기초
SASS에서 문자열은 작은따옴표나 큰따옴표로 감쌀 수 있고, 경우에 따라서는 따옴표를 생략해 식별자처럼 작성할 수도 있습니다. 아래는 문자열을 작성하는 기본 예시입니다.
1// Single quotes
2$single-quoted: 'Hello, World!';
3// Double quotes
4$double-quoted: "Hello, World!";
5// No quotes
6$unquoted: Hello-World;노트
- 따옴표로 감싼 문자열은 그대로 문자열 리터럴로 평가됩니다.
- 따옴표가 없는 문자열은 주로 클래스 이름이나 ID와 같은 CSS 식별자로 처리되므로, 적절하게 사용해야 합니다.
문자열 결합
SASS에서는 + 연산자를 사용해 문자열을 결합할 수 있습니다.
1$greeting: "Hello";
2$name: "Alice";
3
4$result: $greeting + ", " + $name + "!"; // "Hello, Alice!"- 이 코드는 SASS에서
+연산자를 사용해 여러 문자열을 결합하여 새로운 문자열을 만드는 예시입니다.
고급 예시: 클래스 이름 생성하기
1$base-class: "btn";
2$modifier: "primary";
3
4.class-name {
5 content: $base-class + "--" + $modifier; // "btn--primary"
6}- 이 코드는 SASS에서
+연산자를 사용해 기본 클래스 이름과 수정자를 결합하여 새로운 클래스 이름을 생성하는 예시입니다.
문자열 함수 사용하기
SASS는 따옴표 제어나 부분 문자열 추출 등 다양한 문자열 조작을 위한 편리한 내장 함수를 제공합니다.
quote()와 unquote()
quote()와 unquote() 함수를 사용해 문자열에 따옴표를 추가하거나 제거할 수 있습니다.
1$quoted: quote(Hello); // '"Hello"'
2$unquoted: unquote("Hello"); // Hellostr-length($string)
str-length() 함수는 문자열의 길이를 구합니다.
1$length: str-length("Hello"); // 5str-insert($string, $insert, $index)
str-insert() 함수는 지정한 위치에 문자열을 삽입합니다.
1$result: str-insert("Hello", " SASS", 6); // "Hello SASS"str-slice($string, $start-at, [$end-at])
str-slice() 함수는 문자열의 일부를 추출합니다.
1$substring: str-slice("Hello, World!", 1, 5); // "Hello"to-upper-case()와 to-lower-case()
to-upper-case()와 to-lower-case() 함수는 각각 문자열을 대문자나 소문자로 변환합니다.
1$upper: to-upper-case("sass"); // "SASS"
2$lower: to-lower-case("SASS"); // "sass"조건문에서의 문자열 활용
SASS의 @if 지시문을 사용하면 문자열 값을 기준으로 조건 분기를 하여 테마나 설정에 따라 유연하게 스타일을 전환할 수 있습니다.
1$theme: "dark";
2
3@if $theme == "dark" {
4 body {
5 background-color: black;
6 color: white;
7 }
8} @else {
9 body {
10 background-color: white;
11 color: black;
12 }
13}- 이 코드는 SASS의
@if지시문을 사용해 테마가dark인지 확인하고 그에 따라 스타일을 전환하는 예시입니다.
실용 예시: 동적 배경 이미지 경로 생성
아래는 문자열 조작을 이용해 배경 이미지 URL을 생성하는 예시입니다.
1$image-path: "/images/";
2$image-name: "background";
3$image-extension: ".jpg";
4
5.background {
6 background-image: url($image-path + $image-name + $image-extension);
7}컴파일 결과
1.background {
2 background-image: url("/images/background.jpg");
3}- 이 코드는 SASS에서 문자열을 결합하여 배경 이미지 경로를 동적으로 생성하고 배경으로 적용하는 예시입니다.
리스트와 맵과의 결합
SASS의 리스트와 맵을 문자열 조작과 결합하면 보다 유연하게 스타일을 생성할 수 있습니다.
리스트 예시
1$states: "hover", "focus", "active";
2
3@each $state in $states {
4 .btn-#{$state} {
5 content: "Button in " + $state + " state";
6 }
7}컴파일 결과
1.btn-hover {
2 content: "Button in hover state";
3}
4.btn-focus {
5 content: "Button in focus state";
6}
7.btn-active {
8 content: "Button in active state";
9}- 이 코드는 SASS의
@each지시문을 사용해 리스트의 각 상태별로 클래스를 생성하고, 문자열 결합을 통해 내용을 동적으로 설정하는 예시입니다.
맵 예시
1$colors: (
2 "primary": "#3498db",
3 "secondary": "#2ecc71"
4);
5
6@each $name, $color in $colors {
7 .text-#{$name} {
8 color: $color;
9 }
10}컴파일 결과
1.text-primary {
2 color: #3498db;
3}
4.text-secondary {
5 color: #2ecc71;
6}- 이 코드는 SASS 맵을 이용해 색상 이름과 값을 연결하고,
@each지시문으로 각 클래스를 동적으로 생성하는 예시입니다.
문자열 이스케이프
특정 문자열을 CSS 식별자로 안전하게 사용하기 위해서는 이스케이프 처리가 필요할 수 있습니다.
1$special_character: "example\\@123";
2.#{$special_character} {
3 content: "This is a valid CSS class.";
4}컴파일 결과
1.example\@123 {
2 content: "This is a valid CSS class.";
3}- 이 코드는 특수 문자가 포함된 문자열을 SASS에서 변수로 취급하고,
#{$variable}로 확장한 후, CSS에서 유효한 클래스 이름으로 사용하는 예시입니다.
결론
SASS의 문자열 조작은 단순히 문자열 리터럴을 작성하는 것 이상의 의미가 있으며, 동적으로 스타일을 구축하는 강력한 도구입니다. 여기서 소개한 기본적인 연산과 함수를 활용하면 CSS의 재사용성과 유지보수성을 높이고 스타일을 보다 효율적으로 설계할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.