Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Flint (v1.4.0)
// ----

$flint: (

    // Grid configuration
    "config": (

        // Define breakpoints [any amount of breakpoints]
        // Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.]
        "desktop": (

            // Options: 0-infinity
            "columns": 16,

            // Options: number[unit]
            "breakpoint": 80em,
        ),

        // Same applies for other breakpoints
        // ----
        // Remember, you're not fixed to just 4 breakpoints like we have here
        "laptop": (
            "columns": 12,
            "breakpoint": 60em,
        ),
        "tablet": (
            "columns": 8,
            "breakpoint": 40em,
        ),
        "mobile": (
            "columns": 4,
            "breakpoint": 20em,
        ),

        // Additional grid settings [required]
        "settings": (

            // Any breakpoint's alias
            "default": "mobile",

            // Options: fluid | fixed
            "grid": "fluid",

            // Options: number[unit]
            "gutter": 0.625em,

            // Options: left | right
            "float-style": "left",

            // Options: true [uses highest breakpoint] | false | number[unit]
            "max-width": true,

            // Options: true | false
            "center-container": true,

            // Options: true | false
            "border-box-sizing": true,

            // Options: true | false
            "debug-mode": false,
            
            // Syntax support
            "syntax-support": "bem",
        ),
    ),
);

@import "flint";

@function string-to-list($string, $find: " ", $ignore: ",") {
	@if is-string($string) {
		$string-list: ();
		$space-indexes: ();
		$ignore-remainder: ();
		$length: str-length($string);
		
		// Find ignore separator, and remove remainder of string beyond that point
		@for $i from 1 through $length {
			$slice: str-slice($string, $i, $i);
			@if $slice == $ignore {
				$ignore-remainder: append($ignore-remainder, $i - 1, "comma");
			}
		}
		
		// Redefine string and length
		@if length($ignore-remainder) >= 1 {
			$string: str-slice($string, 1, nth($ignore-remainder, 1));
			$length: str-length($string);
		}
		
		// Find all spaces and their indices by looking over each character in string
		@for $i from 1 through $length {
			$slice: str-slice($string, $i, $i);
			@if $slice == $find {
				$space-indexes: append($space-indexes, $i, "comma");
			}
		}
		
		// Check if there are any spaces
		@if length($space-indexes) >= 1 {
		  
			// Keep a count of number of spaces
			$count: 1;
			$parent: ();
			
			// Loop through each space
			@each $space in $space-indexes {
			  
				// If is initial count, grab first substring and store in list
				@if $count == 1 {
					$matched-string: str-slice($string, 0, ($space - 1));
					
					@if $matched-string != "" {
					  $string-list: append($string-list, $matched-string, "comma");
					}
				// Else, add a little math to make up for the spaces to do the same
				} @else {
					$matched-string: str-slice($string, (nth($space-indexes, ($count - 1)) + 1), ($space - 1));
					
					@if $matched-string != "" {
					  $string-list: append($string-list, $matched-string, "comma");
					}
				}
				
				// Increase count
				$count: $count + 1;
			}
			
			// Now grab that last selector
			$last-space: nth($space-indexes, length($space-indexes));
			$matched-string: str-slice($string, ($last-space + 1), $length);
			$string-list: append($string-list, $matched-string, "comma");
			
			// Finally, return comma separated list of selectors
			@return $string-list;
		} @else {
		  
			// Else, just return the string as a single item list
			$string-list: append($string-list, $string);
			
			@return $string-list;
		}
	} @else {
		@return "You did not input a valid string: #{$string}";
	}
}

// Custom syntax function
// ----
@function support-syntax-bem($selectors) {
  $selectors: string-to-list($selectors, "_");
  $parent: nth($selectors, 1);
  $selector-list: ($parent);
  
  // Loop over each selector and build list of selectors
  @each $selector in $selectors {
    // Make sure current selector is not the parent
    @if $selector != $parent {
      // Save to selector list
      $selector-list: append($selector-list, ($parent + "__" + $selector), "comma");
      // Define new parent
      $parent: $parent + "__" + $selector;
    }
  }
  
  // Return the list of transformed selectors
  @return $selector-list;
}

// Global syntax support var
// ----

$flint__support-syntax: get-value("settings", "syntax-support") !global;

// Support syntax
// ----
// @param $syntax [string] : alias of syntax to support
// @param $selectors [string] : string of selectors to transform
// ----
// @return [list] : list of transformed selectors according to syntax

@function support-syntax($syntax, $selectors) {
  $syntax: to-lower-case($syntax);
  
  // Make sure syntax is supported, if not call custom function
  // ----
  @if function-exists(support-syntax-#{$syntax}) {
    
    // Support syntax
    // ----
    // @warning : be sure you have created a custom function to support an unknown syntax
    // ----
    @return call("support-syntax-#{$syntax}", $selectors);
    
  } @else {
    
    // Throw error if the syntax does not exist and a function to call cannot be found
    @warn "You did not pass a valid syntax to `support-syntax`: #{$syntax}. Either specify a custom `support-syntax-<syntax>` function to call, or use one of the offically supported syntaxes.";
    @return null;
    
  }
}

// Use global syntax set through `set-syntax` mixin
// ----
// @param $selectors [string] : string of selectors to transform
// ----
// @return [list] : list of transformed selectors according to syntax

@function use-syntax($selectors) {
  @if $flint__support-syntax {
    @return call("support-syntax-#{$flint__support-syntax}", $selectors);
  }
}

@mixin set-syntax($syntax) {
  $flint__support-syntax: to-lower-case($syntax) !global;
}

// Checks if instance exists in selector familiy tree, falls back from current selector
// -------------------------------------------------------------------------------
// @param $key [string] : breakpoint key to search for matching instance
// @param $syntax [string | null] : searches for instance using passed syntax
// -------------------------------------------------------------------------------
// @return matching instance | false

@function get-family-instance($key: get-value("settings", "default"), $syntax: $flint__support-syntax) {
  $selector-string: selector_string();
  
  // Check for syntax support, try to find instance using it
  @if $syntax {
  	$selector-list: use-syntax($selector-string);
  	$length: length($selector-list);
  
  	// Loop through transformed selectors
  	@for $i from 1 through $length {
  	  
  		// Check last selector in list
  		@if exists($flint__instances, "#{last($selector-list)}::#{$key}") {
  		  
  			// Return the matching instance key
  			@return "#{last($selector-list)}::#{$key}";
  			
  		} @else {
  		  
  			// Else, remove the last selector and loop again
  			$selector-list: remove($selector-list, last($selector-list));
  			
  		}
  	}
  	
  	// Search for a parent instance normally
  	@return get-family-instance($key, null);
  	
  } @else {
  	$selector-list: string-to-list($selector-string);
  	$length: length($selector-list);
  
  	// Loop through length of list of selectors
  	@for $i from 1 through $length {
  	  
  		// Make sure that we're not counting the current selector string
  		@if exists($flint__instances, "#{list-to-string($selector-list, " ")}::#{$key}") and $selector-string != list-to-string($selector-list, " ") {
  			
  			// Return the matching instance key
  			@return "#{list-to-string($selector-list, " ")}::#{$key}";
  			
  		} @else {
  		  
  			// Else, remove the last selector and loop again
  			$selector-list: remove($selector-list, last($selector-list));
  			
  		}
  	}
  	
  	@return false;
  }
}

// ----

@include _("foundation");

.wrapper {
	@include _(16 12 8 4);

	&__parent {
		@include _("clear");
		@include _(16 12 8 4, "auto", $gutter: "none");

		&__single-child {
			@include _("desktop", 12, "auto");
		}

		.child,
		.child-2,
		&__child-3,
		.child-4,
		&__child-5,
		.child-6 {
			@include _(16 12 8 4, "auto");

			&__child-7 {
				@include _(16 12 8 4, "auto");
			}
		}
	}
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.wrapper {
  display: block;
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media only screen and (min-width: 60.0625em) {
  .wrapper {
    width: 98.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media only screen and (min-width: 40.0625em) and (max-width: 60em) {
  .wrapper {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 20.0625em) and (max-width: 40em) {
  .wrapper {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
.wrapper__parent {
  zoom: 1;
  display: block;
  float: left;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}
.wrapper__parent:before, .wrapper__parent:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.wrapper__parent:after {
  clear: both;
}
@media only screen and (min-width: 60.0625em) {
  .wrapper__parent {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media only screen and (min-width: 40.0625em) and (max-width: 60em) {
  .wrapper__parent {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media only screen and (min-width: 20.0625em) and (max-width: 40em) {
  .wrapper__parent {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media only screen and (min-width: 60.0625em) {
  .wrapper__parent__single-child {
    width: 73.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
.wrapper__parent .child,
.wrapper__parent .child-2, .wrapper__parent__child-3,
.wrapper__parent .child-4, .wrapper__parent__child-5,
.wrapper__parent .child-6 {
  display: block;
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media only screen and (min-width: 60.0625em) {
  .wrapper__parent .child,
  .wrapper__parent .child-2, .wrapper__parent__child-3,
  .wrapper__parent .child-4, .wrapper__parent__child-5,
  .wrapper__parent .child-6 {
    width: 98.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media only screen and (min-width: 40.0625em) and (max-width: 60em) {
  .wrapper__parent .child,
  .wrapper__parent .child-2, .wrapper__parent__child-3,
  .wrapper__parent .child-4, .wrapper__parent__child-5,
  .wrapper__parent .child-6 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 20.0625em) and (max-width: 40em) {
  .wrapper__parent .child,
  .wrapper__parent .child-2, .wrapper__parent__child-3,
  .wrapper__parent .child-4, .wrapper__parent__child-5,
  .wrapper__parent .child-6 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}
.wrapper__parent .child__child-7,
.wrapper__parent .child-2__child-7, .wrapper__parent__child-3__child-7,
.wrapper__parent .child-4__child-7, .wrapper__parent__child-5__child-7,
.wrapper__parent .child-6__child-7 {
  display: block;
  float: left;
  width: 93.75%;
  margin-right: 3.125%;
  margin-left: 3.125%;
}
@media only screen and (min-width: 60.0625em) {
  .wrapper__parent .child__child-7,
  .wrapper__parent .child-2__child-7, .wrapper__parent__child-3__child-7,
  .wrapper__parent .child-4__child-7, .wrapper__parent__child-5__child-7,
  .wrapper__parent .child-6__child-7 {
    width: 98.4375%;
    margin-right: 0.78125%;
    margin-left: 0.78125%;
  }
}
@media only screen and (min-width: 40.0625em) and (max-width: 60em) {
  .wrapper__parent .child__child-7,
  .wrapper__parent .child-2__child-7, .wrapper__parent__child-3__child-7,
  .wrapper__parent .child-4__child-7, .wrapper__parent__child-5__child-7,
  .wrapper__parent .child-6__child-7 {
    width: 97.91667%;
    margin-right: 1.04167%;
    margin-left: 1.04167%;
  }
}
@media only screen and (min-width: 20.0625em) and (max-width: 40em) {
  .wrapper__parent .child__child-7,
  .wrapper__parent .child-2__child-7, .wrapper__parent__child-3__child-7,
  .wrapper__parent .child-4__child-7, .wrapper__parent__child-5__child-7,
  .wrapper__parent .child-6__child-7 {
    width: 96.875%;
    margin-right: 1.5625%;
    margin-left: 1.5625%;
  }
}