certainlyakey
7/22/2014 - 12:56 PM

Pass SASS variables to Javascript

Pass SASS variables to Javascript

//Pass SASS variables to Javascript
@function strip-units($number) {
	@return $number / ($number * 0 + 1);
}
@mixin pass_variables($selector,$var_list) { 
	@for $i from 1 through length($var_list) {
		#{$selector}:nth-child(#{$i}):before {
			display:none; content:quote(inspect(strip-units(nth($var_list,$i))));
		}
		$i: $i + 1;
	} 
}

$var_list:$desktop_viewport,$middesktop_viewport,$superdesktop_viewport,$ultradesktop_viewport,$list-h;
@include pass_variables('.secmenu li',$var_list);
//Import SASS variables
	if (window.getComputedStyle) {
		var desktop_viewport = parseFloat(window.getComputedStyle(document.querySelector('.secmenu li:nth-child(1)'),':before').getPropertyValue('content').replace(/"||'/g, ""));
		var superdesktop_viewport = parseFloat(window.getComputedStyle(document.querySelector('.secmenu li:nth-child(2)'),':before').getPropertyValue('content').replace(/"||'/g, ""));
		var ultradesktop_viewport = parseFloat(window.getComputedStyle(document.querySelector('.secmenu li:nth-child(3)'),':before').getPropertyValue('content').replace(/"||'/g, ""));
	}
	
	//Example use
	var changeLegendText = function() {
		if ( window.innerWidth < middesktop_viewport ) {
			$('.registry-tools .legend').text('short text');
		} else {
			$('.registry-tools .legend').text('much more longer text');
		}
	};
	$(window).resize(changeLegendText);
	changeLegendText();