/*변수*/
$red: #fa5252;

/*반응형 화면 크기*/
$mobileSmall: 320px;
$mobile: 501px;
$tablet: 768px;
$desktopMin: 1025px;
$desktopMax: 1240px;

/*css 디폴트는 모바일이 기준*/
/*반응형, 브라우저 크기가 300px 이하일때*/
@mixin mobileSmall {
    @media (max-width: $mobileSmall) {
        @content;
    }
}
@mixin mobile {
    @media (min-width: $mobile) {
        @content;
    }
}
@mixin maxmobile {
    @media (max-width: $mobile) {
        @content;
    }
}

/*반응형, 브라우저 크기가 800px 이상일때*/
/*@media (min-width: $mobile ) and (max-width: $tablet){*/
@mixin tablet {
    @media (min-width: $tablet) {
        @content;
    }
}
@mixin maxtablet {
    @media (max-width: $tablet) {
        @content;
    }
}

@mixin maxdesktop {
    @media (max-width: $desktopMin) {
        @content;
    }
}

/*반응형, 브라우저 크기가 1025px 이상일때*/
@mixin desktopMin {
    @media (min-width: $desktopMin) {
        @content;
    }
}

/*반응형, 브라우저 크기가 1204px 이상일때*/
@mixin desktopMax {
    @media (min-width: $desktopMax) {
        @content;
    }
}

/*넓이, 높이 자동 계산함수*/
@mixin square($size) {
    $calculated: 32px * $size;
    width: $calculated;
    height: $calculated;
}