CodePen

HTML

            
              <h2 class="margb-24">HTML Ipsum Presents</h2>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
            
          
!
via HTML Inspector

CSS

            
              $main-font-size: 16px;
 
@mixin x-rem ($property, $value) {
  #{$property}: $value * $main-font-size;
  #{$property}: #{$value}rem;
}

$baseline: 1.5;



.marg-24 {
  @include x-rem(margin, $baseline);
}
.margt-24 {
  @include x-rem(margin-top, $baseline);
}
.margr-24 {
  @include x-rem(margin-right, $baseline);
}
.margb-24 {
  @include x-rem(margin-bottom, $baseline);
}
.margl-24 {
  @include x-rem(margin-left, $baseline);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................