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();