본문으로 바로가기


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;
}



'StyleSheet > SASSㆍSCSS' 카테고리의 다른 글

[Chapter 02] Sass  (0) 2015.10.27
[Chapter 01] Sass  (0) 2015.10.27
[Chapter 07] Sass 조건문, 반복문  (1) 2015.09.08
[Chapter 05] Sass Mixin 응용  (0) 2015.09.01
Sass 명령어 기초 배우기  (0) 2015.08.07