[Chapter 06] Sass Function & 그 외의 지시어(Directive)

Sass

변수 범위(Scope)와 콘텐츠 블럭(@content)

ㆍ 변수 범위는 JS 의 전역/지역 변수 개념과 유사합니다.

ㆍ Sass 3.2 에 추가된 @content 지시어는 믹스인 정의시에 @content 지시문을 추가하여 믹스인을 호출하는 곳에서 사용된 콘텐츠 블럭을 믹스인으로 전달할 수 있습니다.

// 전역 변수
$color: #3fb5c8;

@mixin colors($color: darkred) {
  // 믹스인 내부에서 $color 값은 지역 변수인 '전달인자'를 가리킵니다.
  background-color: $color; // darkred
  border-color: $color; // darkred
  
  // @content 값은 믹스인을 호출하는 곳인 @include 믹스인명() {} 에서 {} 블록 영역을 말합니다.
  @content;
}

.demo-01 {
  // $color는 전역 변수인 #3fb5c8이 대입됩니다.
  @include colors {
    color: $color;
    font-size: 14px;
  }
}

.demo-02 {
  // $color는 전역 변수인 #3fb5c8이 대입됩니다.
  @include colors($color: red) {
    padding: 20px;
  }
}

See the Pen sass function 1 by jaeheekim (@jaehee) on CodePen.

@content 지시어를 이용한 미디어쿼리

믹스인과 @content 를 사용하면 디바이스별로 분리된 스타일 미디어쿼리가 래핑된 믹스인으로 콘텐츠 블록을 전달하여 이를 단순화시키면 미디어쿼리를 작성할 수 있습니다.

See the Pen sass @content by jaeheekim (@jaehee) on CodePen.

@content 지시어를 이용한 키프레임(keyframe)

키프레임은 콘텐츠 지시어를 사용하는데 있어서 콘텐츠 복제의 매우 좋은 예제입니다.

예를 들어, 각 벤더사의 고유 벤더프리픽스를 선언하여 쓰기보다 믹스인을 정의하여 벤더프리픽스가 선언된 것을 대신 사용할 수 있도록 작성할 수 있습니다.

See the Pen 사스 콘텐츠 키프레임 사용 by jaeheekim (@jaehee) on CodePen.

믹스인을 사용하여 컨텍스트 구체화시키기(Context Specificity)

See the Pen sass Context Specificity by jaeheekim (@jaehee) on CodePen.

@content 지시어와 @at-root를 사용유무에 따른 결과

@at-root 사용한 코드입니다.

See the Pen sass @content @at-root by jaeheekim (@jaehee) on CodePen.

@at-root 를 사용하지 않은 코드입니다.

See the Pen sass 보간법 by jaeheekim (@jaehee) on CodePen.

@content 중복을 제거하기 위해 사용자에게 권한을 부여하는 사스 지침의 하나에 불과합니다.

그렇기 때문에 @content 를 이용한 창의적인 코드 구현에 대한 것은 사용자의 몫입니다.

수학 함수(Number Functions)

// 퍼센트 변경 함수
percentage(13/25) // 52%

// 반올림 함수
round(2.4) // 2

// 올림 함수
ceil(2.2) // 3

// 내림 함수
floor(2.6) // 2

// 절대값 함수
abs(-24) // 24

// 비교하여 작은것을 반환하는 함수
min(10px, 12px) // 10px

// 비교하여 큰것을 반환하는 함수
max(10px, 12px) // 12px

// 난수 함수
random(1) // 0~1

a {
  font-size: ceil(2.2);
  padding: floor(2.6) + px;
  margin: max(10px,12px);
  top: min(10px,12px);
}

See the Pen sass number by jaeheekim (@jaehee) on CodePen.

사용자 정의 함수(@function)

@ JS 함수와 거의 유사한 함수로 @function 으로 모듈을 정의한 후, 이름으로 호출할 수 있어 재 사용이 가능합니다.

// 변수 설정
$unit-width: 40px;
$gutter-width: 10px;

// grid-width 사용자 정의 함수(@function)
@function grid-width($n:1) {
  // 연산 결과 반환(@return)
  @return $n * $unit-width + ($n - 1) * $gutter-width;
}

#sidebar {
  // grid-width 함수 호출 결과 값 반환(전달인자 5)
  width: grid-width(5); // 5 * 40 + (5-1) * 10 = 240px
} 

// px 값을 em 단위로 변경하는 함수
@function px2em($font_size, $base_font_size: 16) {
  @return $font_size / $base_font_size + em;
}

body {
  // 함수 호출
  color: px2em(12, 20); // 12/20 + em = 0.6em
}

See the Pen 사스 함수 by jaeheekim (@jaehee) on CodePen.

반드시 return 키워드가 있어야 계산된 결과가 돌려집니다.

css 단위를 변경하는 sass function 활용하기

// 단위 제거 함수
@function deUnit($value) {
  @return ($value / ($value * 0 + 1))
}

// PX → REM 함수
@function PX2REM($px, $base: 16) {
  @return (deUnit($px) / $base) * 1rem
}
.demo01 {
  font-size: PX2REM(20px);
}

// REM → PX 함수
@function REM2PX($rem, $base: 16) {
  @return (deUnit($rem) * $base) * 1px
}
.demo02 {
  font-size: REM2PX(1rem);
}
.demo03 {
  font-size: REM2PX(1rem, 12);
}

// REM 단축 함수
@function REM($px, $base: 16) {
  @return PX2REM(deUnit($px), $base)
}
.demo04 {
  font-size: REM(20px, 12);
}

// PX → EM 함수
@function PX2EM($px, $base: 16) {
  @return (deUnit($px) / $base) * 1em
}
.demo05 {
  font-size: PX2EM(16px, 10);
}

// EM → PX 함수
@function EM2PX($px, $base: 16) {
  @return (deUnit($px) * $base) * 1px
}
.demo06 {
  font-size: EM2PX(1em, 10);
}

See the Pen sass 단위변경 함수모듈 by jaeheekim (@jaehee) on CodePen.

Sass @debug & @warn

해당 @debug, @warn 지시어는 컴파일시 확인 가능합니다.

아래 코드는 함수의 인자값을 사용자가 잘못 전달했을 경우에 컴파일시에 cmd 및 터미널에서 확인하실 수 있습니다.

@function text-contrast($bg-color, $val: 70%) {
 
  // 변수 $value 초기 값 설정 null
  $value: null;
  
  // 전달인자 값을 확인 (유효성 검사)
  @if (type-of($bg-color) != color) {
    @warn "첫번째 전달인자 값은 컬러 값이어야 합니다. 예) #fff, red, rgba()";
    @debug "사용자가 전달한 값은 #{$bg-color}입니다.";
  }
  @if (lightness($bg-color) > 50%) {
    $value: darken($bg-color, $val)
  }
  @else {
    $value: lighten($bg-color, $val)
  }
  // 함수는 반드시 return 값이 필요하다
  @return $value
}

//  Photoshop 자간 간격 설정
@function lt_Spacing($spacing) {
  @if (type-of($spacing) !=number) {
    @warn "전달한 인자 값은 #{$spacing}입니다 제대로 된 값(숫자)을 전달해주세요."
  }
  @return deUnit($spacing) / 1000+em
}

// 단위 제거 함수
@function deUnit($value) {
  @return ($value / ($value * 0 + 1))
}

.demo-01 {
   background-color: text-contrast(#c4c4c4, 50%)
}

.demo-02 {
  letter-spacing: lt_Spacing(16);
}

See the Pen sass if & debug by jaeheekim (@jaehee) on CodePen.

Jaehee's WebClub