Generated by SassMeister.com.

SassMeister-input-HTML.html

<h5 class="ms-rtestate-field">
  head
</h5>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

@media screen and (min-width: 480px) {
  /* Outer element of the nav bar */
  #O365_NavHeader {
    /* 'Office 365' Text Link */
    #O365_MainLink_Logo {
      /* Hide original Text */
      .o365cs-nav-brandingText {
        display: none;
      }
      /** Inject Logo before the original text link */
      &::before {
        /** Use Office 365 icon fonts */
        font-family: "office365icons", "o365Icons";
        /**
         *		Append Office Logo in front of the original text 
         *   \E055 is the character code of the Office Logo.
         *		* */
        content: "";
        /** Adjust font-size to match the other icons */
        font-size: 22px;
        line-height: 47px;
      }
      /** Finally avoid hover underline because of the link */
      &:hover {
        text-decoration: none;
      }
    }
  }
}

SassMeister-output.css

@media screen and (min-width: 480px) {
  /* Outer element of the nav bar */
  #O365_NavHeader {
    /* 'Office 365' Text Link */
  }
  #O365_NavHeader #O365_MainLink_Logo {
    /* Hide original Text */
    /** Inject Logo before the original text link **/
    /** Finally avoid hover underline because of the link **/
  }
  #O365_NavHeader #O365_MainLink_Logo .o365cs-nav-brandingText {
    display: none;
  }
  #O365_NavHeader #O365_MainLink_Logo::before {
    /** Use Office 365 icon fonts **/
    font-family: 'office365icons', 'o365Icons';
    /** 
    		Append Office Logo in front of the original text 
       \E055 is the character code of the Office Logo.
    		**/
    content: '\E055';
    /** Adjust font-size to match the other icons **/
    font-size: 22px;
    line-height: 47px;
  }
  #O365_NavHeader #O365_MainLink_Logo:hover {
    text-decoration: none;
  }
}

SassMeister-rendered.html

<h5 class="ms-rtestate-field">
  head
</h5>