Generated by SassMeister.com.

SassMeister-input-HTML.html

// Fontstacks and contexts 
// Work in progress

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----



/*
@function output($input){
  
}

.map-get {
  A: map-get(("foo": 1, "bar": 2), "foo");  //=> 1
  B: map-get(("foo": 1, "bar": 2), "bar");  //=> 2
  C: map-get(("foo": 1, "bar": 2), "baz");  //=> null
  D: map-get( () , "baz");                  //=> null
  // E: map-get( invalid , "baz");          //=> ERROR
}

.map-has-key {
  A: map-has-key(("foo": 1, "bar": 2), "foo");// => true
  B: map-has-key(("foo": 1, "bar": 2), "baz");// => false
  // C: map-has-key( invalid, "baz");// => ERROR
}

.map-merge {
  $map: map-merge(("foo": 1), ("bar": 2));           // => ("foo": 1, "bar": 2)
  A: inspect($map);
  // B: map-merge(("foo": 1, "bar": 2), ("bar": 3)); // => ("foo": 1, "bar": 3)
}

// Golden ratio
$phi              : 1.618034          ;
$golden           : $phi              ;

$double-octave    : 4                 ;
$major-twelfth    : 3                 ;
$major-eleventh   : 2.666666667       ;
$major-tenth      : 2.5               ;
$octave           : 2                 ;
$major-seventh    : 1.875             ;
$minor-seventh    : 1.777777778       ;
$major-sixth      : 1.666666667       ;
$minor-sixth      : 1.6               ;
$fifth            : 1.5               ;
$augmented-fourth : 1.41421           ;
$fourth           : 1.333333333       ;
$major-third      : 1.25              ;
$minor-third      : 1.2               ;
$major-second     : 1.125             ;
$minor-second     : 1.066666667       ;


*/
  @function media-context(){
    @return medium;
  }
  
  $root:'';
	$__collection:(
		
		ratio: (
		  traditional : (6, 7,	8,	9,	10,	11,	12,	14,	16,	18,	21,	24,	36,	48,	60,	72, 84, 96, 110),   // The clasical typographic scale (in pt) 6-72 (12)
		  modulator   : (), // Le Corbusier
		  modulator2  : (), // Le Corbusier
		  golden      : (1.618)
		),
		
		font-stack : (
			// sans-serif 
			arial           : (  Arial, 'Helvetica Neue', Helvetica, sans-serif ),
			arial-black     : ( 'Arial Black', 'Arial Bold' ,'Gadget', sans-serif ),
			arial-narrow	  : ( 'Arial Narrow', Arial, sans-serif ),
			arial-rounded   : ( 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif ),
			avant-garde		  : ( 'Avant Garde', Avantgarde,'Century Gothic', CenturyGothic,AppleGothic,sans-serif ),
			calibri			    : (  Calibri, Candara, Segoe, 'Segoe UI',  Optima, Arial, sans-serif ),
			candara			    : (  Candara, Calibri, Segoe, 'Segoe UI',  Optima, Arial, sans-serif ),
			century-gothic	: ( 'Century Gothic', CenturyGothic, AppleGothic, sans-serif ),
			franklin-gothic : ( 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif ),
			futura			    : (  Futura, 'Trebuchet MS', Arial, sans-serif ),
			geneva		    	: (  Geneva, Tahoma, Verdana, sans-serif ),
			gill-Sans		    : ( 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif ),
			helvetica		    : ( 'Helvetica Neue', Helvetica, Arial, sans-serif ),
			impact			    : (  Impact, Haettenschweiler,'Franklin Gothic Bold', Charcoal,'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans serif ),
			lucida-grande	  : ( 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif ),
			optima			    : (  Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif ),
			segoe-ui		    : ( 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif ),
			trebuchet	      : ( 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif ),
			verdana			    : (  Verdana, Geneva, sans-serif ),

			// serif
			garamond        : ( Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif )
		)
  ) !default;
  @function font-stack( $key, $font-stack:null ){
		$stack: map-get( map-get($__collection, font-stack), $key );
		$stack: sans-serif !default;
		@return $stack;
  }


  //        
  //  context( small,  
  //     media      : '(max-width: 480px)',  
  //     fonts-size : 12px,
  //     ratio      : traditional,
  // )
  //

  //  Move the context to another function 
	//  setter 
	// 	@function ratio( mobile ,  
	//
	@function ratio( $context: media-context() ){
		$ratio: map-get((
			small   : TRADITIONAL,
			medium  : GOLDEN,
			large   : GOLDEN
		), $context );
		$ratio: GOLDEN !default;
		@return $ratio;
	}

	//
	//
	//
	@function base-font-size( $context: media-context() ){
		$size: map-get((
			small   :  12px,
			medium  :  14px,
			large   :  16px
		), $context );
		$size: 16px !default; 
		@return $size;
	}


  .foo { 
    font-family: font-stack(garamond);
    font-size: base-font-size();
    ratio: ratio();
  }
  
  
  
  
  
  

SassMeister-output.css

/*
@function output($input){ 
}

.map-get { A: map-get(("foo": 1, "bar": 2), "foo");  //=> 1 B: map-get(("foo": 1, "bar": 2), "bar");  //=> 2 C: map-get(("foo": 1, "bar": 2), "baz");  //=> null D: map-get( () , "baz");                  //=> null // E: map-get( invalid , "baz");          //=> ERROR
}

.map-has-key { A: map-has-key(("foo": 1, "bar": 2), "foo");// => true B: map-has-key(("foo": 1, "bar": 2), "baz");// => false // C: map-has-key( invalid, "baz");// => ERROR
}

.map-merge { $map: map-merge(("foo": 1), ("bar": 2));           // => ("foo": 1, "bar": 2) A: inspect($map); // B: map-merge(("foo": 1, "bar": 2), ("bar": 3)); // => ("foo": 1, "bar": 3)
}

// Golden ratio
$phi              : 1.618034          ;
$golden           : $phi              ;

$double-octave    : 4                 ;
$major-twelfth    : 3                 ;
$major-eleventh   : 2.666666667       ;
$major-tenth      : 2.5               ;
$octave           : 2                 ;
$major-seventh    : 1.875             ;
$minor-seventh    : 1.777777778       ;
$major-sixth      : 1.666666667       ;
$minor-sixth      : 1.6               ;
$fifth            : 1.5               ;
$augmented-fourth : 1.41421           ;
$fourth           : 1.333333333       ;
$major-third      : 1.25              ;
$minor-third      : 1.2               ;
$major-second     : 1.125             ;
$minor-second     : 1.066666667       ;


*/
.foo { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; font-size: 14px; ratio: GOLDEN; }

SassMeister-rendered.html

// Fontstacks and contexts 
// Work in progress