SASS 내장 모듈 / @use

 

SASS 내장 모듈

 

Sass 공식문서

 

@use 를 사용하여 로드할 수 있는 built-in 기능이다.

sass의 모듈 시스템이 도입되기 전에는 해당 기능들을 전역적으로 사용할 수 있었고

지금 또한 하위 호환성을 위해 계속 사용할 수 있지만 새롭게 시스템이 도입한 만큼

전역으로 사용하던 방식과 @use로 사용하는 규칙 또한 알아둬야 할 듯하다.

 

Sass의 내장 모듈들은 아래와 같다.

sass:color
sass:list
sass:map
sass:string
sass:math
sass:meta
sass:selector

 

 

---

sass: color

color.adjust($color, $lightness)

해당 컬러를 해당 값 만큼 명도를 줄이거나 높일 수 있다.

/* darken($color, $amount); */
/* lignten($color, $amount); */

@use "sass:color";

div {
  color: color.adjust(orange, $lightness: -20%);
  /* $lightness에서 음수와 양수 값으로 높이고 낮출 수 있다.*/
}

 

 

color.adjust($color, $saturation)

해당 컬러를 해당 값 만큼 채도를 높이거나 낮출 수 있다.

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

@use "sass:color";

div {
  color: color.adjust(brown, $saturation: 70%);
  /* $saturation에서 음수와 양수 값으로 높이고 낮출 수 있다.*/
}

 

 

color.grayscale($color)

밝기가 동일한 gray 컬러를 반환한다.

/* grayscale($color)) */

@use "sass:color";

div {
  color: color.grayscale(brown);
}

 

---

sass:list

list.append($list, value)

list 데이터에 새로운 값을 추가한다.

 

@use "sass:list";

$names : Jay, Joy, June;

div {
    color:black;
    $names : list.append($names, Jesy);
    @each $name in $names {
        .#{name}::after {
            content: $name;
        }
    }
}

 

list.index($list, value)

list 데이터 안의 해당 값이 몇 번째 index인지 반환한다.

@use "sass:list";

$names : Jay, Joy, June;

@each $name in $names {
    $index: list.index($names, $name);
    .name:nth-child(#{$index})::after{
        content: $name;
    }
}

 

list.join($list1, $list2)

list 데이터들을 병합한 새로운 list를 반환한다.

$names1 : Jay, Joy, June;
$names2 : Hey, Hoon;

$names : list.join($names1, $names2);
/* Jay, Joy, June, Hey, Hoon */

 

 

list.length($list)

배열의 길이를 반환한다.

@use "sass:list";

$names : Jay, Joy, June;

$namesLength : list.length($names);
/* 3 */

 

 

list.nth($list, number)

배열의  index에 해당하는 값을 반환한다.

@use "sass:list";

$names : Jay, Joy, June;

$friend: list.nth($names, 1);
/* Jay */

.#{$friend} {
    color: green;
}

 

---

sass:map

map.get($map, key)

맵데이터 안의 key에 해당하는 값을 반환한다.

@use "sass:map";

$my-info : (
    name: "Jay",
    age: "20"
);

$name: map.get($my-info, name);
/* Jay */

 

 

map.has-key($map, key)

map 데이터 안에 해당하는 key 값이 있는 지 확인할 수 있다.

@if (map.has-key($my-info, age)){
	display: block;
}

 

map.keys($map) / map.values($map)

map 데이터의 key or value 값만 가진 배열을 반환한다.

 

map.merge($map1, $map2)

map 데이터를 병합한 새로운 map을 반환한다.

*중복되는 key값이 있을 경우 뒤에 작성한 데이터로 합쳐진다.

 

map.remove($map, key)

map데이터에 지정한 key값을 제거한 새로운 map을 반환한다.

@use "sass:map";

$my-info : (
    name: "Jay",
    age: "20"
);

$my-info: map.remove($my-info, age);
/* (name: "jay") */

* key값을 제거한 map데이터로 덮어쓰는 방식

 

---

sass:string

@use "sass:string";

.box {
    /* 따옴표 추가 */
    _quote: string.quote(Roboto); /* "Roboto" */
    
    /* 따옴표 삭제 */
    _unquote: string.unquote("Roboto");  /* Roboto */
    
    /* index 구하기 */
    _index: string.index("Roboto Bold", "Bold"); /* 8 */
    
    /* 문자열 삽입 */
    _insert: string.insert("Roboto Bold", " Mono", 7); /* "Roboto Mono Bold" */
    
    /* 문자열 길이 */
    _length: string.length("Roboto"); /* 6 */
    
    /* 문자열 자르기 */
    _slice: string.slice("Roboto Bold", 8); /* "Bold" */
    _slice: string.slice("Roboto Bold", 1, 6); /* "Roboto" */
    
    /* 대소문자 변경 */
     _to-upper-case: string.to-upper-case("Roboto"); /* "ROBOTO" */
    _to-lower-case: string.to-lower-case("Roboto"); /* "roboto" */
    
    /* 고유한 id생성 */
    _unique-id: string.unique-id(); /* "uabw6f4" */

 

---

sass:math

@use "sass:math";


.box {
	/* 올림, 내림, 반올림 */
    _ceil: math.ceil(10.47px);    /* 11px */
    _floor: math.floor(10.47px);  /* 10px */
    _round: math.round(10.47px);  /* 11px */
    
    /* 리스트중 가장 큰 값, 작은 값 반환*/
    _max: math.max(10px, 20px, 30px);  /* 30px */
    _min: math.min(10px, 20px, 30px);  /* 10px */
    
    /* 음수를 양수로 변환 */
    _abs: math.abs(-20px);  /* 20px */
    
    /* 단위가 있는 값인지 체크 */
    _is-unitless: math.is-unitless(20px);  /* false */
    _is-unitless: math.is-unitless(20);    /* true */
    
    /* sass로 연산이 가능한 지 확인 */
    _compatible: math.compatible(10px, 20px); /* true */
    
}

 

---

sass:meta

 

meta.call($callback, paramiter)

콜백 함수를 실행시켜주고 그 값을 반환한다.

@use "sass:meta";


@function a($callback){
    $res: meta.call($callback, 100px);
    @return $res;
}

@function b($size){
    @return $size + 300px;
}

.box {
    width: a(b); /* 400px */
}

 

meta:type-of(value)

해당 데이터의 타입을 반환한다.

@use "sass:meta";


@function check-type($value, $type){
    @return meta.type-of($value) == $type;
}

$color: black;

.box {
    @if check-type($color, color) {
        color: $color;
    }
}