function to do cool stuff on resize - variable are stored in the body:after attribute

resize-fun.js

$(function() {

    var currentSize = "kitty";  // null var so its never the current size to start

    $(window).resize(function() {

        var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
        var $menu = $('.nav-collapse');

        /* Ridiculous thing to deal with inconsistent returning of
           value from query. Some browsers have quotes some don't */
        size = size.replace(/"/g, "");
        size = size.replace(/'/g, "");

        if (size != currentSize) {

            if (size == 'base') {
                // do stuff
                currentSize = 'base';
            }

            if (size == 'lap') {
                // do  other stuff
                currentSize = 'lap';
            }
            if (size == 'portable') {    // example for ajax load
                // $("#content").load("baby.html");
                // currentSize = 'Baby Bear';
            }

        }

    }).resize();

});

variables.scss

body {
  @include mqm($max) {
    &:after {
      content: "base";
      visibility: hidden;
    }
  }
  @include mqmm($min, $mmax) {
    &:after {
      content: "portable";
      visibility: hidden;
    }
  }
  @include mq($min) {
    &:after {
      content: "lap";
      visibility: hidden;
    }
  }
}