CSS from http://cubiq.org/add-to-home-screen, converted to sass

add2home.sass

#addToHomeScreen /* Main container */
  z-index: 9999
  -webkit-user-select: none
  -webkit-box-sizing: border-box
  width: 240px
  font-size: 15px
  padding: 12px 14px
  text-align: left
  font-family: helvetica
  background-image: -webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3))
  border: 1px solid #505050
  -webkit-border-radius: 8px
  -webkit-background-clip: padding-box
  color: #333
  text-shadow: 0 1px 0 rgba(255,255,255,0.75)
  line-height: 130%
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.5)
  .addToHomeWide /* The 'wide' class is added when the popup contains the touch icon */
    width: 296px
    
  .addToHomeIpad
    width: 268px
    font-size: 18px
    padding: 14px
    .addToHomeWide
      width: 320px
      font-size: 18px
      padding: 14px
    .addToHomeArrow
      -webkit-transform: rotateZ(-135deg)
      background-image: -webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee))
      -webkit-box-shadow: inset -1px -1px 0 #fff
      top: -9px
      bottom: auto
      left: 50%
      
  .addToHomeArrow /* The balloon arrow */
    position: absolute
    background-image: -webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc))
    border-width: 0 1px 1px 0
    border-style: solid
    border-color: #505050
    width: 16px
    height: 16px
    -webkit-transform: rotateZ(45deg)
    bottom: -9px
    left: 50%
    margin-left: -8px
    -webkit-box-shadow: inset -1px -1px 0 #a9a9a9
    -webkit-border-bottom-right-radius: 2px
    
  .addToHomeClose /* Close button */
    -webkit-box-sizing: border-box
    position: absolute
    right: 4px
    top: 4px
    width: 18px
    height: 18px
    line-height: 14px
    text-align: center
    text-indent: 1px
    -webkit-border-radius: 9px
    background: rgba(0,0,0,0.12)
    color: #707070
    -webkit-box-shadow: 0 1px 0 #fff
    font-size: 16px
    
  .addToHomePlus /* The '+' icon, displayed only on iOS < 4.2 */
    font-weight: bold
    font-size: 1.3em
    
  .addToHomeShare /* The 'share' icon, displayed only on iOS >= 4.2 */
    display: inline-block
    width: 18px
    height: 15px
    background-repeat: no-repeat
    background-size: 18px 15px
    text-indent: -9999em
    overflow: hidden
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAQAAABDj1eZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdJREFUKFNtkLtLw1AYxS/qJLhXVKr2ZRulUNtiqgSb3CziICI6ucTFVYcOnaQOFRwUnNTRwUWXgpP/QdHNUEQUHGxofYBTlRs83iZNjKTncOGe7/vx3QchXUWn6FL3jhfKUdCCr5zuifV5oDiHQM+c+CIhiiCSWNu08iq9oHXKLAiqrgR4UXqlOEYZt++ExEL0wW7+OW0G10muLv9gmqfe5FAWKmTMYQYiFL7PYwyLOD8lSjNh2gdnPzMII4QUBxc4OothbAF7GCBKQ0YbSWyPQsIhqvetS+y0ygGMo/KFZfviDvR4AhwgZU9dGYnA0J/6ndc15i3ouYIMcVVUcEXIoOxCeRCfwP8sXBSdjtpUv/1QW+K16kCCIUC4id9Fa0JtkluwVkSfqPL6RwfSDA0aNlx7k/bWgViB7bMS2/1vk5sdsZLN/ALSuL3tylO4RAAAAABJRU5ErkJggg==)
    
  .addToHomeTouchIcon /* The touch icon (if available) */
    display: block
    float: left
    -webkit-border-radius: 6px
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.9)
    background-repeat: no-repeat
    width: 57px
    height: 57px
    -webkit-background-size: 57px 57px
    margin: 0 12px 0 0
    border: 1px solid #333
    -webkit-background-clip: padding-box

/* The 'share' icon for retina display */
@media all and (-webkit-min-device-pixel-ratio:  2)
  #addToHomeScreen
    .addToHomeShare
      background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC)