/*변수*/
$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;
}