CodePen

HTML

            
              <body>
  <section>
    <h1>Sass(SCSS) box-sizing IE fallback</h1>
    <a href="http://alwaystwisted.com/post.php?s=2013-12-28-a-sass-y-box-sizing-fallback-if-needs-must">Here's a blogpost explaining it all.</a>
  </section>
</body>
            
          
!

CSS

            
              @mixin IE7Padding($width: null, $unit: 1px, $paddingLeft: 0, $paddingRight: 0) {
@if $paddingLeft == 0 and $paddingRight != 0 {
      padding-right: $paddingRight * $unit;
      width: $width * $unit;
      .lt-ie8 & {
        padding-right: $paddingRight * $unit;
        width: ($width - $paddingRight) * $unit;
      }
    }
    @else if $paddingRight == 0 and $paddingLeft != 0{
      padding-left: $paddingLeft * $unit;
      width: $width * $unit;
      .lt-ie8 & {
        padding-left: $paddingLeft * $unit;
        width: ($width - $paddingLeft) * $unit;
      }
    }
  @else if $paddingRight !=0 and $paddingLeft != 0 {
    padding-right: $paddingRight * $unit;
    padding-left: $paddingLeft * $unit;
    width: $width * $unit;
    .lt-ie8 & {
      padding-right: $paddingRight * $unit;
      padding-left: $paddingLeft * $unit;
      width: ($width - $paddingLeft - $paddingRight) * $unit;
    }
  }
}

section {
  @include IE7Padding(100, 1%, 20); 
}
nav {
  @include IE7Padding(100, 1px, 0, 30);  
}
aside {
  @include IE7Padding(100, 1%, 2, 30); 
}
footer {
  @include IE7Padding(970, 1px, 20, 80); 
}
header {
  @include IE7Padding(970, 1px, 20, 10);   
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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