Another Scratchpad for MQ system

SassMeister-input.scss

// ----
// libsass (v0.7.0)
// ----

@import "sass-list-maps";
@function get($args...) {
  @return map-get-z($args...);
}
@function merge($args...) {
  @return map-merge-z($args...);
}
@function set($args...) {
  @return map-merge-z($args...);
}
@function single($unit) {
  $keys: 'em', 'ex', 'ch', 'rem', '%', 'vw', 'vh', 'vmin', 'vmax', 'cm', 'mm', 'in', 'px', 'pt', 'pc', 'deg', 'grad', 'rad', 'turn', 's', 'ms', 'dpi', 'dpcm', 'dppx';
  $values: 1em, 1ex, 1ch, 1rem, 1%, 1vw, 1vh, 1vmin, 1vmax, 1cm, 1mm, 1in, 1px, 1pt, 1pc, 1deg, 1grad, 1rad, 1turn, 1s, 1ms, 1dpi, 1dpcm, 1dppx;
  $index: index($keys, $unit); @if $index { @return nth($values, $index); } @return 1; }
@function strip($value) { @return $value / single(unit($value)); }
@function assert($value, $unit) { @return strip($value) * single($unit); }

/*
what's wrong / what's next

- base scale should affect mq scales, but not mq em widths
- standard html and body declarations should also be included?
- build in the routine for checking if html has already been declared at that size

*/
// default media query data
$mq-data: (
  base (
    gutter 1rem,
    scale 100%
  ),
	alpha (
		width 30rem,
		gutter 2rem,
		scale 110%
	),
	beta (
		width 45rem,
		gutter 2rem,
		scale 110%
	),
	gamma (
		width 60rem,
		gutter 2rem,
		scale 110%
	),
	delta (
		width 60rem,
		gutter 3rem,
		scale 125%
	)
) !default;

// initialize global current query data
$mq-current: get($mq-data, 'base');

$base-scale: get($mq-data, 'base', 'scale');
$base-line-height: 1.5;

// global object we will populate
$mq:();

// populate the mq object
@mixin mq-setup() {
	@each $mq in $mq-data {
		$alias: tuple-key($mq);
		$spec: tuple-value($mq);
		@if $alias != 'base' {

		  // collect basic params
  		$width: get($spec, 'width');
  		$height: get($spec, 'height');
  		$scale: get($spec, 'scale');
  		$scale: if(unit($scale) == '%', strip($scale) / 100, $scale); // remove?
      $gutter: get($spec, 'gutter');

  		// compute the query params (width only, so far)
  		$base-scale: get($mq-data, 'base', 'scale');
  		$base-scale: if(unit($base-scale) == '%', strip($base-scale) / 100, $base-scale); // remove?
  		// $norm-scale: if(unit($scale) == '%', strip($scale) / 100, $scale) * if(unit($base-scale) == '%', strip($base-scale) / 100, $base-scale);
  		$query: (assert($width, em) + 2 * assert($gutter, em)) * $scale;

      // merge back to mq object
  		$mq-data: merge($mq-data, $alias, 'query-width', $query);
  		@media screen and (min-width: #{$query}) {
  			html { font-size: $scale * $base-scale * 100%; }
  			body, .col_body { margin-left: $gutter; margin-right: $gutter; }
  			.row_body { margin-left: - $gutter; margin-right: - $gutter; }
  		}
		} @else {
  		$scale: get($spec, scale);
      $gutter: get($spec, 'gutter');
  		html { font-size: if(unit($scale) == '%', strip($scale) / 100, $scale) * 100%; }
			body, .col_body { margin-left: $gutter; margin-right: $gutter; }
			.row_body { margin-left: - $gutter; margin-right: - $gutter; }
  		
		}
	}
}

@include mq-setup();

@mixin mq($alias) {
  $mq-temp: $mq-current;
  $mq-current: get($mq-data, $alias);
  @content;
  $mq-current: $mq-temp;
}

@function mq($var) { @return get($mq-current, $var); }

// ++++ BREAKPOINT Aliases and Modifications

$html-font-size: 100% !default;


$mq: (); // the object we will populate



// // this version outputs html declaration more conservatively; requires query-data in order from small to large
// @mixin query-setup-alt($queries) {
//     $mq: () !global;
//     $prev-scale: strip($html-font-size);
// 	@each $alias, $spec in $hash {
// 		$width: assert(map-get($spec, width), em);
// 		$gutter: assert(map-get($spec, gutter), em);
// 		$scale: strip(map-get($spec, scale));
// 		$output: map-merge(map-get($hash, $alias), (query: ($width + 2 * $gutter) * $scale / 100));
// 		$mq: map-merge($mq, (#{$alias}: $output)) !global;
// 		@if $scale != $prev-scale { @media (min-width: #{map-get($output, query)}) { html { font-size: assert($scale, '%'); } } }
// 		$prev-scale: $scale;
// 	}
// }

// query-query calculates query for aliases and fires breakpoint
@mixin query($aliases...) {
    $aliases: if(length($aliases) == 1, nth($aliases, 1), $aliases); $directive: nth($aliases, 1);
	$lti: index(lessthan less-than lt before below, $directive); $query: ();
	@if $lti { $aliases: reject($aliases, $directive); $query: (max-width get($mq, nth($aliases, 1), query)); }
	@else { @each $alias in $aliases { $query: append($query, get($mq, $alias, query)); } }
	@include breakpoint($query) { @content; }
}

// ++++ HELPER FUNCTIONS

// get specific mq parameters
@function q-width($alias) { @return map-get(map-get($mq, $alias), 'width'); }
@function q-scale($alias) { @return map-get(map-get($mq, $alias), 'scale'); }
@function q-gutter($alias) { @return map-get(map-get($mq, $alias), 'gutter'); }
@function q-query($alias) { @return map-get(map-get($mq, $alias), 'query'); }

// // apply mq parameters to properties
// @mixin q-apply($map) {
// 	@each $alias in map-keys($mq) {
// 		@include query($alias) {
// 			@each $tuple in $map {
// 				// $property, $q-func
// 				$property: tuple-key();
// 				$q-func
// 			    #{$property}: call($q-func, $alias);
// 			}
// 		}
// 	}
// }

// calc rems for pixels, per query scale
@function q-rem($alias, $val, $sep: 'space') {
    $scale: map-get(map-get($mq, $alias), 'scale');
	$n-scale: if(unit($scale) == '%', strip($scale) / 100, $scale) * $base-font-size / 16px;
    // if $val is fucked, bail
	@if not $val { @return false; }
	// if $val is a pixel qty, do rem for px
	@else if length($val) > 1 {
		$out: (); @each $v in $val {
			@if unit($v) == 'rem' { $out: append($out, $v, $sep); }
			@else { $out: append($out, assert($v / strip($base-font-size * $n-scale), rem), $sep); }
		}
		@return $out;
	} @else {
		@if unit($val) == 'rem' { @return $val; }
		@else { @return assert($val / strip($base-font-size * $n-scale), rem); }
	}
}



.test {
  debugger: unit(100%);
  out: get($mq-data, alpha, query-width);
  @include mq(alpha) {
    width: mq(width);
  }
  @include mq(beta) {
    width: mq(width);
  }
  width: mq(width);
}

SassMeister-output.css

/*
what's wrong / what's next

- base scale should affect mq scales, but not mq em widths
- standard html and body declarations should also be included?
- build in the routine for checking if html has already been declared at that size

*/
html {
  font-size: 100%; }

body, .col_body {
  margin-left: 1rem;
  margin-right: 1rem; }

.row_body {
  margin-left: -1rem;
  margin-right: -1rem; }

@media screen and (min-width: 37.4em) {
  html {
    font-size: 110%; }
  body, .col_body {
    margin-left: 2rem;
    margin-right: 2rem; }
  .row_body {
    margin-left: -2rem;
    margin-right: -2rem; } }

@media screen and (min-width: 53.9em) {
  html {
    font-size: 110%; }
  body, .col_body {
    margin-left: 2rem;
    margin-right: 2rem; }
  .row_body {
    margin-left: -2rem;
    margin-right: -2rem; } }

@media screen and (min-width: 70.4em) {
  html {
    font-size: 110%; }
  body, .col_body {
    margin-left: 2rem;
    margin-right: 2rem; }
  .row_body {
    margin-left: -2rem;
    margin-right: -2rem; } }

@media screen and (min-width: 82.5em) {
  html {
    font-size: 125%; }
  body, .col_body {
    margin-left: 3rem;
    margin-right: 3rem; }
  .row_body {
    margin-left: -3rem;
    margin-right: -3rem; } }

.test {
  debugger: "%";
  out: 37.4em;
  width: 30rem;
  width: 45rem;
  width: null; }