Generated by SassMeister.com.

SassMeister-input-HTML.html

<main role="main">
  <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut erat in tellus pulvinar posuere. Cras vitae dui ante. Sed ac nisl in nibh fermentum elementum. Quisque arcu turpis, volutpat at euismod vitae, imperdiet quis augue. Proin pellentesque consequat risus, id convallis odio interdum interdum. Pellentesque et odio in nulla cursus pulvinar. Etiam consectetur lorem laoreet maximus molestie. In sit amet convallis diam, id blandit eros. Duis a pretium justo, a consequat mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus elit ac porttitor pharetra. Vestibulum tempus leo erat, a tempus orci dictum ac.</p>
      <p class="pull-quote">Lorem ipsum dLorem ipsum dolor sit ametLorem ipsum dolor sit ametolor sit amet, consectetur ad</p>
  </div>
  <div id="footer">
    <a href="#">Brand</a>
  </div>
</main>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

// <http://speckyboy.com/2011/04/15/25-css-snippets-for-some-of-the-most-common-and-frustrating-tasks/>
// <http://speckyboy.com/2014/07/21/50-css-tutorials-techniques/>
//$legacy-support : true;

// --------------------------------------------
// Links
// http://tympanus.net/Development/InlineAnchorStyles/
// --------------------------------------------

// Reset color, background for all html elements
* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}
// Apply our basic styling for links 
a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;
}

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
 
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
 
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after{
    content: url(icons/zip.png);
}


// --------------------------------------------

/* # Page-break

Ajouter un saut de page lors de l'impression
A ajouter dans la feuille print

*/
%page-break{
   page-break-before:always;
}
/* # Pull-Quote 

Basic Pull-Quote styling

*/
%pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
  
}

/* # Drop Cap 

Use Typeplate

*/
@mixin drop-cap(){
    &:first-letter{
      display:block;
      margin:5px 0 0 5px;
      float:left;
      color:#000;
      font-size:60px;
      font-family:Georgia;
    }
}
// Usage example
/*
p:nth-child(1){
  @include drop-cap;
}

*/







@mixin vertical-align($height){
  display: table-cell;
  vertical-align: middle;
  
  @if $height{
    height:$height + em;
  }
  @else {
    @warn "The height must be set";
  }
}
/* # Fixed Footer 

@mixin fixed-footer
@param $footer-selector (#footer !default)
@setting $legacy-support

*/
@mixin fixed-footer($footer-selector: '#footer'){
  $legacy-support : true;
  #{$footer-selector}{
     position:fixed;
     left:0px;
     bottom:0px;
     height:32px;
     width:100%;
     background:#333;
  }
  @if $legacy-support == true {
    /* IE 6 support */
    * html #{$footer-selector}{
       position:absolute;
       top:unquote("expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');")
    }
  }
}






// Demo Styles
main{
  width:960px;
  height:45em;
  margin:auto;
}
@include fixed-footer('#footer');
.container{
  //@include vertical-align(45);
}

SassMeister-output.css

* {
  color: black !important;
  background-color: white !important;
  background-image: none !important; }

a:link {
  font-weight: bold;
  text-decoration: underline;
  color: #06c; }

/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"] {
  padding-right: 20px;
  background: url(external.gif) no-repeat center right; }

/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"] {
  padding-right: 20px;
  background: url(email.png) no-repeat center right; }

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
*/
a[href$=".pdf"] {
  padding-right: 20px;
  background: url(pdf.png) no-repeat center right; }

/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
*/
a[href$=".zip"]:after {
  content: url(icons/zip.png); }

/* # Page-break

Ajouter un saut de page lors de l'impression
A ajouter dans la feuille print

*/
/* # Pull-Quote 

Basic Pull-Quote styling

*/
/* # Drop Cap 

Use Typeplate

*/
/*
p:nth-child(1){
  @include drop-cap;
}

*/
/* # Fixed Footer 

@mixin fixed-footer
@param $footer-selector (#footer !default)
@setting $legacy-support

*/
main {
  width: 960px;
  height: 45em;
  margin: auto; }

#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 32px;
  width: 100%;
  background: #333; }

/* IE 6 support */
* html #footer {
  position: absolute;
  top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');; }

SassMeister-rendered.html

<main role="main">
  <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut erat in tellus pulvinar posuere. Cras vitae dui ante. Sed ac nisl in nibh fermentum elementum. Quisque arcu turpis, volutpat at euismod vitae, imperdiet quis augue. Proin pellentesque consequat risus, id convallis odio interdum interdum. Pellentesque et odio in nulla cursus pulvinar. Etiam consectetur lorem laoreet maximus molestie. In sit amet convallis diam, id blandit eros. Duis a pretium justo, a consequat mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec dapibus elit ac porttitor pharetra. Vestibulum tempus leo erat, a tempus orci dictum ac.</p>
      <p class="pull-quote">Lorem ipsum dLorem ipsum dolor sit ametLorem ipsum dolor sit ametolor sit amet, consectetur ad</p>
  </div>
  <div id="footer">
    <a href="#">Brand</a>
  </div>
</main>