Sass 맛보기 #2

예시를 통한 Sass의 사용법

2021년 08월 07일 · 0 분 소요

Sass 맛보기는 총 2편의 시리즈로 구성되어 있습니다.

Sass 맛보기 #1
Sass 맛보기 #2 (현재글)

들어가며

이번 포스팅은 #1에서 예고한 것처럼 sass에서 사용하는 Values(data types)와 그에 관련된 사용법 예시를 통해 보여드리려고 합니다.
이 또한 개인적으로 공부하면서 정리한 부분들이기에 부족한 부분들이나 다소 두서없는 설명이 있을 수 있으니 참고하시어 ~~(흐리게 눈 뜨시고)~~ 봐주시면 감사하겠습니다.

Values

Numbers
Strings
Colors
Lists
Maps
Boolean
null
Functions

1. Numbers

Sass의 Number에는 숫자 자체와 단위라는 2가지 요소가 포함되어있습니다.

100(정수), 0.8(소수), 100px(숫자+스타일에 사용되는 모든 단위)...

숫자 연산 관련
잠시 계산법도 확인해보자면
+, -, * 는 우리가 알고 있는 기본적인 방식으로 사용하면 되지만
단위가 있는 경우의 곱하기는 중복되는 단위를 한 번만 사용하여야 합니다.
나누기는 / 가 sass 내부에서 숫자를 분리하는 방법으로 사용되기 때문에
(/ 가 sass만의 용도가 있다고 이해하시면 될 듯)
단순히 / 를 사용하면 오류가 날 수 있으니 계산식 앞뒤로 괄호( )로 감싸 사용해주셔야 합니다.

.main {
    width: 20px + 20px;
    height: 200px - 20px;
    margin-top: (20px / 2); // 이렇게
    font-size: 20px * 1; // 이렇게 | 20px * 1px 를 사용하면 20px*px 형태로 출력되어 error 발생.
}

또한 단위를 사용하는 경우 호환 가능한 범위 내에서 사용해주셔야 합니다.

.main {
    width: 10s + 15s; // 앞뒤 같은 단위 = OK!
    height: 1in - 10px; // 유사한 inch와 px 단위 혼용 = OK!
    margin-top: 100px + 10s; // px과 s(초)?.. 이미 단위 이상하지 않나요 = NO!
}

혹 동일 단위가 아닌 여러 단위를 섞어 사용하는 경우 조금 더 이해하시기 편하실까 하여 포토샵 새 파일 생성 시 설정 창에서 width 값의 단위 옵션을 열어 캡처해보았는데요.

포토샵 새 파일 생성 시 설정 창 캡처 — 포토샵 새 파일 생성시 설정 창 캡처

보시는 것 처럼 Pixels, Inches, Centimeters, Milimeters, Points 등은 혼용 사용 가능합니다.

.test {
  background-size: 1in - 10px; // 0.8958333333in;
  font-size: 10cm - 1in; // 7.46cm
  width: 1cm - 1pc; //  0.5766666667cm;
  height: 1mm - 1px; // 0.7354166667mm
}

위 예시의 결괏값처럼 Sass는 소수점 이하 10자리까지 지원하고 있으니 계산식 사용 시 참고하시면 좋을 것 같습니다.
소수점 10자리가 너무 길죠…? 자르고 싶다거나 자르고 싶다거나 자르고 싶어질 수 있으니 뭔가 편하게 작업 가능한 내장함수가 어떤 것들이 있는지 한번 알아보았습니다. (수학이랑 절교한 지 오래되어 삼각함수 등은 제외하였습니다. 보고 싶으시다면 참고문서를 확인해주세요.)
아! 잊을 뻔하였네요. Sass의 내장함수를 사용하려면 선언을 먼저 해주어야 합니다.
내장함수 선언 부분은 예시를 확인해주세요.

Number 내장함수

함수	설명
`ceil()`	소수점 이하를 올려 정숫값을 반환해줍니다.
`clamp()`	`math.clamp($min, $number, $max)` 와 같이 사용합니다. number의 값이 min보다 작다면 min 값을, max보다 크다면 max 값을 반환해줍니다. min, number, max는 호환 가능한 단위가 있거나 모두 단위가 없어야 합니다.
`floor()`	소수점 이하를 버려 정수 값을 반환해줍니다.
`max()`	1개 이상의 숫자 중 가장 높은 값(최댓값)을 반환해줍니다.
`min()`	1개 이하의 숫자 중 가장 낮은 값(최솟값)을 반환해줍니다.
`round()`	소수점 이하를 반올림하여 정숫값을 반환해줍니다.
`abs()`	숫자의 절댓값을 반환해줍니다.
`compatible()`	앞뒤 값이 서로 호환되는 단위를 사용하고 있는지 확인하여 true, false 값으로 반환해줍니다.
`is-unitless()`	단위 유무를 확인하여 true, false 값으로 반환해줍니다.
`unit()`	숫자를 제외한 단위의 문자열을 반환해줍니다. 단, 디버깅을 위한 것이기에 버전 또는 구현에 따라 일관성이 보장되지 않습니다.
`div()`	첫 번째 값을 두 번째 값으로 나눈 값을 반환해줍니다.
`percentage()`	백분율로 변환해줍니다.
`random()`	null, 0, 1 사이의 임의의 값을 반환해줍니다.

@use "sass:math"; // sass의 math 내장함수를 사용하고 싶다면 선언을 해주세요.

@debug math.ceil(4.2); // 5
@debug math.clamp(1px, -1px, 10px); // 1px
@debug math.max(1px, 4px); // 4px
@debug math.min(1px, 4px); // 1px
@debug math.floor(4.2); // 4
@debug math.round(4.2); // 4
@debug math.abs(10px); // 10px
@debug math.abs(-10px); // 10px
@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.is-unitless(100); // true
@debug math.is-unitless(100px); // false
@debug math.unit(100px); // "px"
@debug math.unit(5px * 10px); // "px*px"
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px
@debug math.percentage(0.2); // 20%
@debug math.random(); // 0.6221325814

참고 문서 : https://sass-lang.com/documentation/modules/math

2. Strings

저희가 스크립트 작업 시 사용하던 방법과 유사합니다. ~~(아시잖아요…)~~

.main:before {
    content: "string " + text;
}

.p:before {
  content: "Icon!! " + "\1F46D";
}

// 컴파일 후
.main:before {
    content: "string text";
}

.p:before {
  content: "Icon!! \1F46D"; // Icon!! 👭
}

String 내장함수

함수	설명
`quote()`	value를 따옴표로 묶인 문자열로 반환해줍니다.
`index()`	`index($string, $substring)` 으로 사용합니다. substring 값이 몇 번째 인덱스에 있는지 결괏값을 반환해줍니다.
`insert()`	문자열에 추가해줍니다.
`length()`	문자의 개수를 반환해줍니다.
`slice()`	`slice($string, $start-at, $end-at: -1)` 로 사용합니다. end-at 없이 start-at만 사용하는 경우 해당 인덱스까지 자르고 남은 문자열을 반환해줍니다. end-at을 사용하는 경우 시작 인덱스의 문자값을 포함하여 end-at에 설정해준 개수만큼 자른 문자열을 반환해줍니다.
`to-upper-case()`	대문자로 반환해줍니다.
`to-lower-case()`	소문자로 반환해줍니다.
`unique-id()`	무작위로 생성된 문자열을 반환해줍니다.
`unique()`	따옴표가 없는 문자열로 반환해줍니다.

@use "sass:string"; // sass의 string 내장함수를 사용하고 싶다면 선언을 해주세요.

@debug string.quote(Helvetica); // "Helvetica"
@debug string.quote("Helvetica"); // "Helvetica"
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
@debug string.length("Helvetica Neue"); // 14
@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
@debug string.to-upper-case("Bold"); // "BOLD"
@debug string.to-lower-case("Bold"); // "bold"
@debug string.unique-id(); // u6w1b1def
@debug string.unquote("Helvetica"); // Helvetica

3. Colors

색상 16진수 코드, 컬러명, rgb(), rgba(), hsl(),와 hsla() 등으로 사용합니다.

표기 방식 예

@debug #f2ece4; // <= 색상 16진수 코드 #f2ece4 
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // <= 컬러명 #191970 
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

.main {
    background-color: #fff; // 또는 #ffffff
    color: rgba(0, 0, 0, 0.5);
    .sub {
        background-color: hsla(0, 100% ,50%, 0.5);
    }
}

다른 아이들은 자주 사용하지만 hsl은 약간 생소하실 수 있는데요.
H는 Hue (색상)
S는 Saturation (채도)
L은 Lightness (명도=Brightness)입니다.

제 기준 익숙한;; 포토샵으로 영역을 구분해 보았는데요. 보시고 조금 더 이해하기 편하셨으면 좋겠네요..

설정 창 내부 컬러 영역별 설명. 좌측 사이드 - 상단 흰색에서 하단 검은색으로 그라데이션 영역 : 해당 영역이 Lightness 0 ~ 100%까지, 상단 사이드 - 좌측 흰색에서 우측 빨간색으로 그라데이션 영역 : 해당 영역이 Saturation 0~100%까지, 우측 사이드 - 상단 빨간색으로 시작하는 12색상 그라데이션 영역 : 해당 영역이 Hue 영역 0 ~ 360deg까지 — 포토샵 색상 설정 창

Lightness 는 상황에 따라 표기된 영역이 아닌 때도 있지만 기본적으로 Y축을 따라 움직인다고 생각하시면 됩니다.

그리고 hsl은 단위가 있다는 차이! 사용 시 꼭 체크하시면 좋을 것 같아요.

Color 내장함수
참고문서로 확인하시는 것이 더 정확하실 듯합니다.

참고 문서 : https://sass-lang.com/documentation/modules/color

4. Lists

Lists는 쉼표(,), 공백 또는 슬래시로 값을 구분할 수 있으며, index는 1부터 시작합니다. 리스트로 선언된 원본 데이터는 변경되지 않고 함수 등으로 수정, 추가 시 복사된 리스트 데이터를 전달합니다.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
    .icon-#{$size} {
        font-size: $size;
        height: $size;
        width: $size;
    }
}

// 컴파일 후
.icon-40px {
    font-size: 40px;
    height: 40px;
    width: 40px;
}
.icon-50px {
    font-size: 50px;
    height: 50px;
    width: 50px;
}
.icon-80px {
    font-size: 80px;
    height: 80px;
    width: 80px;
}

List 내장함수

함수	설명
`nth()`	특정 인덱스의 값을 찾아줍니다.
`index()`	특정 값의 인덱스를 찾아줍니다.
`append()`	리스트에 단일 값을 추가해줍니다. 단 리스트의 맨 뒤에 추가됩니다.
`is-bracketed()`	리스트에 대괄호 포함 여부를 확인하여 true, false로 반환합니다.
`join()`	두 개의 리스트 데이터를 하나로 결합해줍니다.
`length()`	리스트 데이터의 길이를 결괏값으로 반환해줍니다.
`set-nth()`	리스트 데이터의 n 번째 인덱스의 데이터가 전달하는 값으로 변경됩니다. n이 음수일 때 리스트 데이터 마지막부터 계산됩니다.
`zip()`	각 리스트의 같은 인덱스의 데이터들끼리 결합해줍니다. 단, 길이가 짧은 리스트 데이터를 기준으로 리스트 데이터가 변환되어 결괏값으로 반환됩니다. 반환된 리스트 데이터는 항상 쉼표로 구분되고 하위 목록은 항상 공백으로 구분됩니다.

@use "sass:list"; // sass의 list 내장함수를 사용하고 싶다면 선언을 해주세요.

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.index(1px solid red, solid); // 2
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]
@debug list.is-bracketed(1px 2px 3px); // false
@debug list.is-bracketed([1px, 2px, 3px]); // true
/*
  $separator는 데이터 구분 값을 설정할 수 있도록 해줍니다.
  제공 값은 comma, space, slash입니다.
  join() 예시 결괏값을 비교해보세요.
*/
@debug list.join(10px, 20px); // 10px 20px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.length(10px 20px 30px); // 3
@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px

5. Maps

key:value로 이루어져 있으며 List와 달리 Map은 괄호로 묶어 사용합니다.

@use "sass:map"; // sass의 map 내장함수를 사용하고 싶다면 선언을 해주세요.

$font-weights: ("light": 200, "regular": 400, "bold": 700);

.main {
  font-size: 20px;
  font-weight: map-get($font-weights, regular); // map-get이라는 내장함수를 사용하여 map의 key 값으로 값을 가져옵니다.
}

// 컴파일
.main {
  font-size: 20px;
  font-weight: 400;
}

Map 내장함수

함수	설명
`map-get()`	해당 key 값의 value를 반환해줍니다.
`map-merge()`	`map-merge($map1, $map2)`으로 사용합니다. 두 개의 map을 병합하여 목록으로 반환해줍니다. $map1과 $map2의 키가 모두 동일한 경우 $map2의 값이 우선으로 적용됩니다.
`map-keys()`	map의 key 값만 목록으로 반환해줍니다.
`map-remove()`	map의 해당 key 값을 삭제한 나머지를 목록으로 반환해줍니다.
`map-values()`	map 내부의 value들을 ,로 구분한 목록으로 반환해줍니다.

@use "sass:map"; // sass의 map 내장함수를 사용하고 싶다면 선언을 해주세요.

$font-weights: ("regular": 400, "medium": 500, "bold": 700);
$light-weights: ("lightest": 100, "light": 300);

@debug map.get($font-weights, "regular"); // 400
@debug map.merge($light-weights, $font-weights);
// ("lightest": 100, "light": 300, "regular": 400, "medium": 500, "bold": 700)
@debug map.keys($font-weights); // "regular", "medium", "bold"
@debug map.remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map.values($font-weights); // 400, 500, 700

이 외의 함수와 더 자세한 내용을 보고 싶으시다면 참고문서를 확인해주세요.

참고문서 : https://sass-lang.com/documentation/modules/map

6. Boolean

논리값 즉, true & false를 말합니다. 조건에 따른 작업 수행 여부를 판단할 때 많이 사용합니다.

// Sass 공식 사이트 예시
@debug 1px == 1px; // true
@debug 10px < 3px; // false
@debug true or false; // true
@debug true and false; // false

7. null

null은 값이 없거나 결과가 없음을 나타냅니다. Boolean을 사용하는 조건에서 null은 false 로 계산되기도 합니다.

8. Functions

함수도 값으로 사용될 수 있습니다.
값으로 직접적인 작성은 어렵지만, 인수를 전달하여 값을 가져와서 사용 가능합니다.
@function의 사용 방법은 Sass 맛보기 #1에 설명되어있으니 참고 부탁드리겠습니다.

마치며

모든 아이들을 다 정리하지 못하여 부족한 부분들이 ~~many~~ 보이시겠지만..나름 정리해보았습니다.
sass 관련 포스팅은 여기까지입니다. 읽어주셔서 감사합니다. 😊
그럼 안녕히…👋 -The End-

참고문서

https://sass-lang.com/documentation