A responsive utility for Sass to sync with JS.

_responsive.scss

// For JavaScript

@if $has-media-query == true {
  head {
    font-family: 'xxsmall';

    @include breakpoint(xsmall) { font-family: 'xsmall'; }
    @include breakpoint(small) { font-family: 'small'; }
    @include breakpoint-custom('(min-width: #{ems(686px, $breakpoint-context)})') { font-family: 'small_custom'; }
    @include breakpoint(medium) { font-family: 'medium'; }
    @include breakpoint(large) { font-family: 'large'; }
    @include breakpoint(xlarge) { font-family: 'xlarge'; }
  }

  body:after { // For JavaScript
    content: 'xxsmall';
    display: none;

    @include breakpoint(xsmall) { content: 'xsmall'; }
    @include breakpoint(small) { content: 'small'; }
    @include breakpoint-custom('(min-width: #{ems(686px, $breakpoint-context)})') { content: 'small_custom'; }
    @include breakpoint(medium) { content: 'medium'; }
    @include breakpoint(large) { content: 'large'; }
    @include breakpoint(xlarge) { content: 'xlarge'; }
  }
}

// For development; to hide, set $is-staging to false in main.scss

@if $is-staging == true {
  body:before {
    background: rgba(red, .5);
    bottom: 0;
    color: #fff;
    content: 'XXS';
    display: block;
    font-size: 12px;
    left: 0;
    line-height: 1;
    padding: 10px 20px;
    position: fixed;
    z-index: 100;

    @include breakpoint(xsmall) { content: 'XS'; }
    @include breakpoint(small) { content: 'S'; }
    @include breakpoint-custom('(min-width: #{ems(686px, $breakpoint-context)})') { content: 'Custom'; }
    @include breakpoint(medium) { content: 'M'; }
    @include breakpoint(large) { content: 'L'; }
    @include breakpoint(xlarge) { content: 'XL'; }
  }
}

main.js

// Calling layout.init

var layouts = {
    xsmall: function()
    {
        someFunction();
    }
};

layout.init({
    'xsmall'       : layouts.xsmall
});

responsive.js

define(['jquery'], function($)
{
    return new function()
    {
        var self = this;

        // -- End properties

        /**
         * Initalizes layout method to run scripts at specified breakpoints.
         * @param  {object} callbacks This object should accept three options: desktop, tablet and mobile.
         * @return {void}
         */
        self.init = function(callbacks)
        {
            var resizeTimer;
            var layouts;
            var layoutsArray = [];

            for(var layout in callbacks) {
                if (callbacks.hasOwnProperty(layout))
                    layoutsArray.push(layout);

                layouts = layoutsArray.toString().replace(/[, ]+/g, ' ');
            }

            updateLayout(callbacks, self.getCurrentLayout(), layouts);

            $(window).resize(function()
            {
                if(resizeTimer !== null)
                    window.clearTimeout(resizeTimer);

                resizeTimer = window.setTimeout(function()
                {
                    updateLayout(callbacks, self.getCurrentLayout(), layouts);
                }, 100);
            });
        };

        /**
         * Sets up backwards compatibility for init.
         * @deprecated
         * @param  {object} callbacks
         * @return {void}
         */
        self.initResponsiveLayout = function(callbacks)
        {
            self.init(callbacks);
        };

        self.getCurrentLayout = function()
        {
            var currentLayout;

            if (window.opera) { // Fix for Opera issue when using font-family to store value
                currentLayout = window.getComputedStyle(document.body,':after').getPropertyValue('content');
            }
            else if (window.getComputedStyle) { // For all other modern browsers
                currentLayout = window.getComputedStyle(document.head,null).getPropertyValue('font-family');
            }
            else { // For old IE
                currentLayout = 'desktop';
            }

            return currentLayout.replace(/["']/g, "");
        };

        // -- End public methods

        function setLayout(layout, callback, layouts)
        {
            // var el = $('html');
            // if (!el.hasClass(layout))
            //     el
            //         .removeClass(layouts)
            //         .addClass(layout);

            if (typeof callback == 'object' && callback[layout] !== null)
                callback[layout]();
        }

        function updateLayout(callbacks, currentLayout, layouts)
        {
            for(var layout in callbacks) {
                if (callbacks.hasOwnProperty(layout) && currentLayout == layout || currentLayout == layout + 'Small')
                    setLayout(layout, callbacks, layouts);
            }
        }

        // -- End private methods
    }();
});