Sass 활용(웹폰트,PX2EM, accessivility )

Sass 웹폰트 모듈 호출하기

/**
 * -------------------------------
 * 변수
 * -------------------------------
 */

// Typography
$base: 16;

  // 글꼴
$serief: 'Tiems New Roman', Serief;
$sans-serief: Verdana, Sans-Serief;

$serief-ko: Gulim, Serief;
$sans-serief-ko: 'Nanum Gothic', Dotum, Sans-Serief;

  // 구글 웹폰트
$noto-serif: 'Noto-Serief:400,700';
$noto-sans: 'Noto+Sans:400,700';
$monoton: 'Monoton';

$webfont: $sans-serief-ko;

  // * --------------------------------
  // * 웹폰트 모듈
  // * 사용 시, 주의할 점!!!
  // *보간법을 사용할 경우는 url() 사용!!!
  // * --------------------------------
@import url('http://fonts.googleapis.com/css?family=#{$webfont}');

Sass Unit(단위) 환산 모듈

// PX → REM 함수
@function PX2REM($px, $base: 16) {
  @return (deUnit($px) / $base) * 1rem
}
// REM → PX 함수
@function REM2PX($rem, $base: 16) {
  @return (deUnit($rem) * $base) * 1px
}

// REM 단축 함수
@function REM($px, $base: 16) {
  @return PX2REM(deUnit($px), $base)
}

// PX → EM 함수
@function PX2EM($px, $base: 16) {
  @return (deUnit($px) / $base) * 1em
}
// EM → PX 함수
@function EM2PX($px, $base: 16) {
  @return (deUnit($px) * $base) * 1px
}

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

.demo01 {
  font-size: PX2REM(20px);
}

.demo02 {
  font-size: REM2PX(1rem);
}

.demo03 {
  font-size: REM(20px, 12);
}

.demo04 {
  font-size: REM2PX(1rem, 12);
}

.demo05 {
  font-size: PX2EM(16px, 10);
}

.demo06 {
  font-size: EM2PX(1em, 10);
}

Sass accessivility 모듈

// * --------------------------------
// * Sass Accessivility
// * --------------------------------

// * --------------------------------
// *스크린리더/브라우저에서 모두 감추기
%hidden {
  display: none !important;
  visibility: hidden;
}

// * --------------------------------
// *스크린리더에서는 읽기 가능
%a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  // 스크린리더에서는 읽기 가능 + 포커스 적용
  &%focusable:active,
  &%focusable:focus {
    overflow: visible;
    position: static;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
  }
}

// * --------------------------------
// *화면에서는 안 보이지만, 레이아웃 공간 적용
%invisible {
  visibility: hidden;
}