Миксин для адаптивности конкретного поля (автоматический умножается на кофицент)

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

@function _length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
  $index: index($strings, $unit);

  @if not $index {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }

  @return $number * nth($units, $index);
}
@function number($string) {
  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  $numbers:  0   1   2   3   4   5   6   7   8   9;
  $result: 0;
  $minus: false;
  $divider: 0;
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    $index: index($strings, $character);
    @if $character == '-' {
      $minus: true;
    }
    @else if $character == '.' {
      $divider: 1;
    }    
    @else {
      @if not $index {
        $result: if($minus, $result * -1, $result);
        @return _length($result, str-slice($string, $i));        
      }
      $number: nth($numbers, $index);
      // Decimal dot hasn't been found yet
      @if $divider == 0 {
        $result: $result * 10;
      }

      // Decimal dot has been found
      @else {
        // Move the decimal dot to the left
        $divider: $divider * 10;
        $number: $number / $divider;
      }
      $result: $result + $number;      
    }
    
  }
  @return if($minus, $result * -1, $result);
  @return $result;
}
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}
@function replace-var($string,$factor){
  $result:'';
  $x-index: str-index($string,'x');
  $last-notNumber:0;
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    @if ($character == '-' or $character == '+' or $character == '/' or $character == '*' or $character == ' ') {
      $last-notNumber: $i;
    }  
    @if $character == 'x'{
      $search: str-slice($string, ($last-notNumber)+1, $i);
      $replace: number(str-slice($string, ($last-notNumber)+1, ($i)-1))*$factor;
      //@return str-replace($string, $search, $replace);
      $result: str-slice($string, 1, $last-notNumber)+$replace;
    }
    @else{
      $result:$result+$character;  
    }
    
  }
  //$result: number(str-slice($string, ($last-notNumber)+1, ($x-index)-1))*$factor;
  @return $result;
}

.sass {
  cast: number("-15")+10;    //5
  cast: number("-1");     // -1
  cast: number("-0.5");    // -.5
  cast: number("-0");     // 0
  cast: number("0");      // 0
  case: number(".10");    // 0.1
  cast: number("1");      // 1
  cast: number("1.5");    // 1.5
  cast: number("10.");    // 10
  cast: number("12.380"); // 12.38
  cast: number("42");     // 42
  cast: number("1337");   // 1337

  cast: number("-10px");  // -10px
  cast: number("20em");   // 20em
  cast: number("30ch");   // 30ch

  cast: number("1fail");  // Error
  cast: number("string"); // Error
}
// ----

$w0:"(min-width:0px)";
$w320:"(min-width:320px)";
$w480:"(min-width:480px)";
$w640:"(min-width:640px)";
$w768:"(min-width:768px)";
@mixin responsive($properties,$defaultValue, $responsiveValues){
  &{
    @each $property in $properties{
      #{$property}:$defaultValue;
    }
  }
  @each $media, $value in $responsiveValues{
    @media #{$media}{
      &{
        @each $property in $properties{
          #{$property}:$value;
        }
      }
    }
  }
}

$all-w:($w0,$w320,$w480,$w640,$w768);

@mixin hbsize($properties,$vars,$rule){
  //$tvar:($w320:10px, $w480:15px, $w640:15px, $w768:20px);
  $tvar:();
  $tst:($w320:10px, $w480:15px, $w640:15px, $w768:20px);
  @if type_of($rule) == 'number' {
    @for $i from 1 through length($vars) {
      $tvar: map-merge($tvar,(nth($all-w,$i):nth($vars,$i)*$rule));
    }
  }
  @else {
    @for $i from 1 through length($vars) {
      $tvar: map-merge($tvar,(nth($all-w,$i):unquote(replace-var($rule,nth($vars,$i)))));
    }
  }
  @include responsive($properties,nth($vars,1),$tvar);
}

/*0*/
$x: 10px;
$h1: 36px;
$h2: 22px;
$h3: 20px;
$h4: 18px;
$main-text: 14px;
$sub-text: 11px;
/*480*/
$x-480: 14px;
$h1-480: 40px;
$h2-480: 26px;
$h3-480: 22px;
$h4-480: 20px;
$main-text-480: 18px;
$sub-text-480: 15px;
/*All*/
$all-x:($x,$x-480);
$all-h1:($h1,$h1-480);
$all-h2:($h2,$h2-480);
$all-h3:($h3,$h3-480);
$all-h4:($h4,$h4-480);
$all-main-text:($main-text,$main-text-480);
$all-sub-text:($sub-text,$sub-text-480);
/*************************TEST****************************/
/*.class{
  @include test('width',$all-x,1.5);
}*/
/*************************TEST2****************************/
.class1{
  @include hbsize('width',$all-x,5);
  @include hbsize('width',$all-x,"(100%+5x)");
  @include hbsize('padding', $all-x, "0 3x");
  //@include hbsize('padding',$all-x,"2x 1.5x 6x");

}

/*************************RESPONSIVE****************************/
/*.class1{
  @include responsive("padding",#333,($w320:10px, $w480:15px, $w640:15px, $w768:20px));
}*/

SassMeister-output.css

.sass {
  cast: -5;
  cast: -1;
  cast: -0.5;
  cast: 0;
  cast: 0;
  case: 0.1;
  cast: 1;
  cast: 1.5;
  cast: 10;
  cast: 12.38;
  cast: 42;
  cast: 1337;
  cast: -10px;
  cast: 20em;
  cast: 30ch;
  cast: false;
  cast: false;
}

/*0*/
/*480*/
/*All*/
/*************************TEST****************************/
/*.class{
  @include test('width',$all-x,1.5);
}*/
/*************************TEST2****************************/
.class1 {
  width: 10px;
}
@media (min-width: 0px) {
  .class1 {
    width: 50px;
  }
}
@media (min-width: 320px) {
  .class1 {
    width: 70px;
  }
}
.class1 {
  width: 10px;
}
@media (min-width: 0px) {
  .class1 {
    width: (100%+50px);
  }
}
@media (min-width: 320px) {
  .class1 {
    width: (100%+70px);
  }
}
.class1 {
  padding: 10px;
}
@media (min-width: 0px) {
  .class1 {
    padding: 0 30px;
  }
}
@media (min-width: 320px) {
  .class1 {
    padding: 0 42px;
  }
}

/*************************RESPONSIVE****************************/
/*.class1{
  @include responsive("padding",#333,($w320:10px, $w480:15px, $w640:15px, $w768:20px));
}*/