A Neat calc

_neat-calc.scss

// ----
// libsass (v3.1.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

@function neat-calc($nb-col, $unit: em){
    
    $bloc-width: ($nb-col*$column)+($gutter * ($nb-col - 1));
    
    @debug "@mixin neat-calc : " $bloc-width;
    
    @return $bloc-width;
}

@function em2px($number,$em-base:16){
    
        @return strip-units($number) * strip-units($em-base);

}


/* # @function RWDcalc 



@function rwdcalc   - converts unitless values to a % of context.
$values             - {string|list}
$context {string} (906 !default)  - Valeur du contexte
@return             - {list|string} percent or value with unit

*/
@function rwdcalc($values: 0, $context: 960px) {
    
  @if unit($context) == px {
    $context: $context / 1px;
  }

  // To compile with libsass we test if this is a list or a string
  @if type-of($values) == list {
    // start with an empty list of values.
    $list: ();
    // loop through all possible values in the string 
    // (margin, padding and so on can be lists)
    @each $value in $values {
      
      // If the value has no unit, consider it a px-% conversion
      @if unit($value) == "" {
        $list: append($list, percentage($value / $context), space);
      }
      @if unit($value) == em {
        $list: append($list, ($value / $context), space);
      }
      // Else pass the value back to the list unchanged.
      @else {
        $list: append($list, $value);
      }
    }
  }
  @else {
    @if unit($values) == "" {
      $list: percentage($values / $context);
    }
    @else {
      $list: $values;
    }
  }
  
  // return the list with unitless values converted.
  @return $list;
}

/* RWDcalc Mixin

If you just pass target and context argument, the mixin set the width

if no unit is specified the value is converted to percents

~~~~
   @include rwdcalc(300,960);
~~~~




$target - {int|string} a number or a list of values

*/
@mixin rwdcalc($target: 0, $context: 960px, $margin: false, $padding: false, $border: false) {
  @if unit($context) == px {
    $context: $context / 1px;
  }
  @if unit($target) == px {
    $target: $target / 1px;
  }

  // Width is a straight converstion of target/context.
  width: rwdcalc($target, $context);

  // Margin, padding, and border get converted to % if they are passed in as a unitless value.
  @if $margin != false {
    // just pull in the rwdcalc function for these.
    margin: rwdcalc($margin, $target);
  }
  @if $padding != false {
    padding: rwdcalc($padding, $target);
  }
  @if $border != false {
    @if type-of($border) == list {
      // Transparent border so metrics get written by default.
      border: 0 solid transparent;
      // Write width overrides:
      border-width: rwdcalc($border, $target);
    }
    @else {
      border: rwdcalc($border, $target) solid transparent;
    }
  }
}

$em-base: 16;
$max-width: em(960);

$bloc-width:em(300);

.test{
  font-size: $em-base;
  width: $bloc-width;
  @include rwdcalc(em(300),em(960));
}

neat-calc-output.css

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* # @function RWDcalc 



@function rwdcalc   - converts unitless values to a % of context.
$values             - {string|list}
$context {string} (906 !default)  - Valeur du contexte
@return             - {list|string} percent or value with unit

*/
/* RWDcalc Mixin

If you just pass target and context argument, the mixin set the width

if no unit is specified the value is converted to percents

~~~~
   @include rwdcalc(300,960);
~~~~




$target - {int|string} a number or a list of values

*/
.test {
  font-size: 16;
  width: 18.75em;
  width: 18.75em; }