Sync CSS & JS Breakpoint Values

sync-css-and-js-breakpoint-values--ress.js

RESS = {};
RESS.resize = function() {
	var a;
	return function() {
		clearTimeout(a);
		a = setTimeout(function() {
			a = null;
			RESS.storeSizes();
		}, 250);
	};
};
RESS.writeCookie = function(a, b) {
	document.cookie = a + "=" + b + "; path=/";
};
RESS.storeSizes = function() {
	RESS.writeCookie("RESS_width", window.innerWidth);
};
RESS.storeSizes();
if (window.getComputedStyle) {
	window.addEventListener("resize", RESS.resize());
	var screenWidth = window.getComputedStyle(document.body, ":after").getPropertyValue("content").replace(/"/g, '');
};

sync-css-and-js-breakpoint-values--simple.js

var breakpoint;
var update_breakpoint = function(){
	breakpoint = getComputedStyle(document.body, '::after').getPropertyValue('content').replace(/"/g, '');
};
window.addEventListener('resize', update_breakpoint);
update_breakpoint();

sync-css-and-js-breakpoint-values.css

body:after {
	content: 'nano';
	display: none;
}
@media screen and (min-width: 480px) {
	body:after {
		content: 'x-small';
	}
}
@media screen and (min-width: 640px) {
	body:after {
		content: 'small';
	}
}
@media screen and (min-width: 768px) {
	body:after {
		content: 'medium';
	}
}
@media screen and (min-width: 960px) {
	body:after {
		content: 'large';
	}
}
@media screen and (min-width: 1170px) {
	body:after {
		content: 'x-large';
	}
}