Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solution to Sub-pixel IE's bug with SASS
// !!! NOT TESTED WITH WIDTH OR MARGIN NEGATIVE VALUES
// IE correction
@function correction($container-width){
@return (0.5 / $container-width) * 100%;
}
//Fixed % to IE
@function pc($container-width: 0,$percentage: 0){
@if $percentage == auto or $percentage == 0{
@return $percentage;
}@else{
@return ( $percentage - correction($container-width) );
}
}
@mixin width($container-width: 0,$percentage: 0){
.ie6 &,
.ie7 &{
width: pc($container-width,$percentage);
}
width: $percentage;
}
@mixin margin($container-width:0, $ptop: 0, $pright: 0, $pbottom: 0, $pleft: 0){
margin: $ptop $pright $pbottom $pleft;
.ie6 &,
.ie7 &{
margin: pc($container-width,$ptop) pc($container-width,$pright) pc($container-width,$pbottom) pc($container-width,$pleft);
}
}
// EXAMPLE
#example{
$width: 49;
width: 49px;
background-color: green;
overflow: hidden;
.title{
background-color: red;
width: #{$width}px;
height: 50px;
}
.boxexample{
@include width($width,25%);
@include margin($width,20%,auto,0,0);
height: 50px;
float: left;
background-color: blue;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment