resizeUtil.styl

gistfile1.styl

$scalingConfig = {
  minSize: 1200,
  maxSize: 1350,
  mobileSize: 480,
  scalingType: 1vw,
  setOriginSizeByMobile: true,
  setMediaByBreakPoints: false,
  fixedMaxWidth: true
}

$scalingBreakPoints = {
  pointSize-1: 1280,
  pointSize-2: 1024
}

$SCALING-TYPE = $scalingConfig.scalingType
$IS-FIXED-WIDTH = $scalingConfig.fixedMaxWidth
$IS-ORIGINAL-SIZE-BY-MOBILE = $scalingConfig.setOriginSizeByMobile
$IS-SET-MEDIA-BY-BREAKPOINTS = $scalingConfig.setMediaByBreakPoints
$MIN-SCREEN-SIZE = $scalingConfig.maxSize
$MAX-SCREEN-SIZE = $scalingConfig.minSize
$MOBILE-SCREEN-SIZE = $scalingConfig.mobileSize

checkScalingType()
  if $SCALING-TYPE == 1vw
    "width"
  else
    "height"

$scalingMediaType = checkScalingType()

$MEDIA-MIN-SIZE = "(max-{$scalingMediaType}: ($MAX-SCREEN-SIZE)px)"
$MEDIA-MAX-SIZE = "(min-{$scalingMediaType}: ($MIN-SCREEN-SIZE)px)"
$MEDIA-MOBILE-SIZE = "(max-{$scalingMediaType}: ($MOBILE-SCREEN-SIZE)px)"

get-vw($object, $type = 1vw, $size = $MIN-SCREEN-SIZE)
  $ratio = $size / $MIN-SCREEN-SIZE
  $vw = ($MIN-SCREEN-SIZE * 0.01)
  if $object == "auto" or $object == null
    $object
  else
    ((($object * $ratio) / $vw) * $type)vw;

get-px($object)
  if $object == "auto" or $object == null
    $object
  else
    get-vw($object, 1px) * $MAX-SCREEN-SIZE

propertySetScalingType($size, $property, $size1, $size2 = null, $size3 = null, $size4 = null)
  {$property}: get-vw($size1, $SCALING-TYPE, $size) get-vw($size2, $SCALING-TYPE, $size) get-vw($size3, $SCALING-TYPE, $size) get-vw($size4, $SCALING-TYPE, $size)

propertySetPx($property, $size1, $size2 = null, $size3 = null, $size4 = null)
  {$property}: get-px($size1) get-px($size2) get-px($size3) get-px($size4)

mediaForBreakPoints($properties)
  for name, screenSize in $scalingBreakPoints
    @media (max-width: (screenSize)px)
      for name, values in $properties
        propertySetScalingType(screenSize, name, values[0], values[1], values[2], values[3]);

scalingSize($properties)
  for name, value in $properties
    propertySetScalingType($MIN-SCREEN-SIZE, name, value[0], value[1], value[2], value[3]);

  if $IS-SET-MEDIA-BY-BREAKPOINTS
    mediaForBreakPoints($properties)

  @media $MEDIA-MIN-SIZE
    for name, value in $properties
      if $IS-ORIGINAL-SIZE-BY-MOBILE == true
        {name}: value
      else
        propertySetPx(name, value[0], value[1], value[2], value[3])

  @media (max-{$scalingMediaType}: 980px) //1350 + (980 / 2)
    for name, value in $properties
      propertySetScalingType(1840, name, value[0], value[1], value[2], value[3]);

  if $IS-FIXED-WIDTH
    @media (max-{$scalingMediaType}: 480px)
      for name, value in $properties
        {name} value

  if $IS-FIXED-WIDTH
    @media $MEDIA-MAX-SIZE
      for name, value in $properties
        {name} value

tabletStyles($block)
  @media $MEDIA-MIN-SIZE
    {$block}

mobileStyles($block)
  @media $MEDIA-MOBILE-SIZE
    {$block}