Cacher is the code snippet organizer for pro developers

$(function() {
  var ua = navigator.userAgent
  var os = navigator.platform
  var bs = window.navigator.userAgent.toLowerCase()
  var body = $('body')

  if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0) {
    body.addClass('ua-sp ua-iphone')
  } else if (ua.indexOf('iPad') > 0) {
    body.addClass('ua-tb ua-ipad')
  } else if (ua.indexOf('Android') > 0) {
    if (ua.indexOf('Mobile') > 0) {
      body.addClass('ua-sp ua-android')
    } else {
      body.addClass('ua-tb ua-android')
    }
  } else if (os.indexOf('Win') > 0) {
    body.addClass('ua-pc ua-win')
  } else {
    body.addClass('ua-pc ua-not-win')
  }

  if (bs.indexOf('msie') > 0 || bs.indexOf('trident') > 0) {
    body.addClass('ua-ie')
  } else if (bs.indexOf('edge') > 0) {
    body.addClass('ua-edge')
  } else if (bs.indexOf('chrome') > 0) {
    body.addClass('ua-chrome')
  } else if (bs.indexOf('safari') > 0) {
    body.addClass('ua-safari')
  } else if (bs.indexOf('firefox') > 0) {
    body.addClass('ua-firefox')
  } else if (bs.indexOf('opera') > 0) {
    body.addClass('ua-opera')
  } else {
    body.addClass('ua-other-browser')
  }
})

$device-config: (
  sp: sp,
  tb: tb,
  pc: pc,
  iphone: iphone,
  ipad: ipad,
  android: android,
  sp-android: sp-android,
  tb-android: tb-android,
  win: win,
  mac: not-win,
  linux: not-win
);

@mixin device($key) {
  @at-root .ua-#{map-get($device-config, $key)} & {
    @content;
  }
}

$browser-config: (
  ie: ie,
  edge: edge,
  chrome: chrome,
  safari: safari,
  firefox: firefox,
  opera: opera
);

@mixin browser($key) {
  @at-root .ua-#{map-get($browser-config, $key)} & {
    @content;
  }
}