Generated by SassMeister.com.

SassMeister-input.scss

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

// When using the Grid Layout module and Sass, 
// you might encounter a bug where Sass strips
// parentheses around line identifiers.
// This happens because parentheses are mostly 
// optional in Sass. However this makes your 
// grid-template-columns and grid-template-rows
// declarations buggy. 
// Here is a fix intending to fix this problem.


/// Wrap a value in parenthesis if needed
/// @access private
/// @param {*} $value
/// @return {*}
@function convert-line-identifier($value) {
  $is-line-identifier: 
    // A list...
    type-of($value) == 'list'
    // ...or a string...
    or type-of($value) == 'string' 
    // ...but not `auto`, `min-content` or `max-content`...
    and not index(auto min-content max-content, $value)
    // ...and not a `minmax()`, `repeat()` or `calc()` call...
    and not index('repea' 'minma' 'calc(', str-slice($value, 1, 5));
    
  @return if($is-line-identifier, unquote('(' + $value + ')'), $value);
}


/// Apply `$function` to each item from `$list` with `$args`
/// @access private
/// @param {List} $list
/// @param {String} $function
/// @param {Arglist} $args
/// @return {List}
@function each($list, $function, $args...) {
  @for $i from 1 through length($list) {
    $list: set-nth($list, $i, call($function, nth($list, $i), $args...));
  }
  
  @return $list;
}


/// Mixin fixing Sass bug for `grid-templates-columns`
/// @access public
/// @param {List} $list
/// @output `grid-template-columns`
@mixin grid-template-columns($list) {
  grid-template-columns: each($list, 'convert-line-identifier');
}


/// Mixin fixing Sass bug for `grid-templates-row`
/// @access public
/// @param {List} $list
/// @output `grid-template-row`
@mixin grid-template-rows($list) {
  grid-template-rows: each($list, 'convert-line-identifier');
}



$columns: (first nav) 200px (main) 1fr (last);
$rows: (first header) 50px (main) 1fr (footer) calc(50px - 1em) (last);

// Initial test - buggy
.test[bug] {
  grid-template-columns: $columns;
  grid-template-rows: $rows;
}

// Using mixins, fixed
.test[fix] {
  @include grid-template-columns($columns);
  @include grid-template-rows($rows);
}

SassMeister-output.css

.test[bug] {
  grid-template-columns: first nav 200px main 1fr last;
  grid-template-rows: first header 50px main 1fr footer calc(50px - 1em) last;
}

.test[fix] {
  grid-template-columns: (first nav) 200px (main) 1fr (last);
  grid-template-rows: (first header) 50px (main) 1fr (footer) calc(50px - 1em) (last);
}