$color-main: #ff5722;
$color-main-dark: #C41C00;
$color-darkGrey: #596568;
$color-Grey: #353535;
$color-lightGrey: #686868;
$color-gnbBg: #ccc;
$color-headSelectBg: #f4f4f4;
$color-textDarkGrey: #585858;
$color-textLightGrey: #909090;
$color-headOptionBg: #e3e3e3;
$color-headBtnGrey: #9eacbc;
$color-toolsBlock: #6e6e6e;
$color-rolerBorder: #979797;
$color-rangeBg: #f5f5f5;
$color-rangeImgIcon: #d0d0d0;
$color-artboardController: #e8e8e8;
$color-mobileIconBg: #201112;
$color-mobileIcon: #ffd232;
$white: #ffffff;
@mixin transition-easing($sec) {
-webkit-transition: all $sec ease-in-out;
-o-transition: all $sec ease-in-out;
transition: all $sec ease-in-out;
}
//
// 미디어 쿼리 MIXIN
// --------------------------------------------------
// Break Point (Desktop First 기준 내림차순 설정)
$desktop-l-width : 1440px;
$laptop-l-width : 1700px;
$tablet-l-width : 1024px;
$tablet-s-width : 768px;
$mob-l-width : 640px;
$mob-m-width : 425px;
$mob-s-width : 375px;
// only PC
@mixin pc-only {
@media screen and (min-width: #{$tablet-l-width + 1}) {
@content;
}
}
// PC large
@mixin pc-large {
@media screen and (min-width: #{$desktop-l-width + 1}) {
@content;
}
}
// --------------------------------------------------
// 노트북
@mixin lap {
@media screen and (max-width: #{$laptop-l-width}) {
@content;
}
}
// 태블릿
@mixin tab {
@media screen and (max-width: #{$tablet-l-width}) {
@content;
}
}
// 모바일
@mixin mob {
@media screen and (max-width: #{$tablet-s-width}) {
@content;
}
}
// 모바일 large
@mixin mob-large {
@media screen and (max-width: #{$mob-l-width}) {
@content;
}
}
// 모바일 mid
@mixin mob-mid {
@media screen and (max-width: #{$mob-m-width}) {
@content;
}
}
// 모바일 small
@mixin mob-small {
@media screen and (max-width: #{$mob-s-width}) {
@content;
}
}
사용
@include mob-large {
}
'Coding' 카테고리의 다른 글
| ajax function (0) | 2018.10.10 |
|---|---|
| for문 안에 function 순서 맞추기 (0) | 2018.09.10 |
| fabric 참고 (0) | 2018.06.21 |
| es6 ::: getter & setter (0) | 2018.06.19 |
| ES6 ::: 배열 (0) | 2018.06.18 |