Sass 맛보기 #2

예시를 통한 Sass의 사용법


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

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


들어가며

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

Values

  1. Numbers
  2. Strings
  3. Colors
  4. Lists
  5. Maps
  6. Boolean
  7. null
  8. 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 값의 단위 옵션을 열어 캡처해보았는데요.

포토샵 설정 창 내부 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

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 내장함수
참고문서로 확인하시는 것이 더 정확하실 듯합니다.


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

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


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-

참고문서


    추천 글