Skip to content

Instantly share code, notes, and snippets.

@stefanoc
Created September 25, 2014 15:22
Show Gist options
  • Save stefanoc/8a7080ec9a3d5d1cf455 to your computer and use it in GitHub Desktop.
Save stefanoc/8a7080ec9a3d5d1cf455 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----
$price_classes: (p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, pc, s0, s1, s2, s3, s4, s5, s6, s7, s8, s9)
$price_small: ((0px -122px, 20px, 42px, -5px), (-44px -122px, 13px, 42px, -7px), (-85px -122px, 14px, 42px, -6px), (-129px -122px, 20px, 42px, -6px), (-174px -122px, 20px, 42px, -11px), (-222px -122px, 18px, 42px, -8px), (-269px -122px, 19px, 42px, -9px), (-311px -122px, 16px, 42px, -12px), (-358px -122px, 14px, 42px, -7px), (-404px -122px, 15px, 42px, -6px), (-453px -127px, 1px, 42px, -1px), (-4px -179px, 9px, 42px, -8px), (-38px -179px, 9px, 42px, -11px), (-79px -179px, 8px, 42px, -8px), (-117px -179px, 10px, 42px, -10px), (-164px -179px, 9px, 42px, -8px), (-214px -179px, 6px, 42px, -6px), (-261px -179px, 6px, 42px, -6px), (-308px -179px, 4px, 42px, -5px), (-355px -179px, 7px, 42px, -6px), (-400px -179px, 7px, 42px, -5px))
$price_big: ((0px 0px, 30px, 61px, -5px), (-49px 0px, 32px, 61px, -7px), (-89px 0px, 44px, 61px, -7px), (-138px 0px, 40px, 61px, -7px), (-182px 0px, 39px, 61px, -9px), (-228px 0px, 40px, 61px, -6px), (-274px 0px, 40px, 61px, -6px), (-322px 0px, 35px, 61px, -6px), (-363px 0px, 40px, 61px, -9px), (-410px 0px, 40px, 61px, -6px), (-457px 0px, 23px, 61px, -7px), (-2px -68px, 27px, 45px, -8px), (-47px -68px, 24px, 45px, -10px), (-93px -68px, 28px, 45px, -8px), (-137px -68px, 30px, 45px, -9px), (-183px -68px, 30px, 45px, -8px), (-231px -68px, 26px, 45px, -6px), (-276px -68px, 26px, 45px, -6px), (-321px -68px, 24px, 45px, -6px), (-364px -68px, 26px, 45px, -6px), (-410px -68px, 26px, 45px, -6px))
=fancy-price-spans($list)
@for $i from 0 to length($price_classes)
&.#{nth($price_classes, $i + 1)}
background-position: #{nth(nth($list, $i + 1), 1)}
width: #{nth(nth($list, $i + 1), 2)}
height: #{nth(nth($list, $i + 1), 3)}
margin-left: #{nth(nth($list, $i + 1), 4)}
=fancy-price($size: big)
text-align: center
width: 100%
span
text-indent: -9999px
display: inline-block
background-image: url("price-sprite.png")
background-repeat: no-repeat
overflow: hidden
margin-left: -13px
@if $size == big
width: 40px
height: 61px
+fancy-price-spans($price_big)
@else
width: 20px
height: 42px
padding-left: 12px
+fancy-price-spans($price_small)
.price
+fancy-price(big)
.price {
text-align: center;
width: 100%;
}
.price span {
text-indent: -9999px;
display: inline-block;
background-image: url("price-sprite.png");
background-repeat: no-repeat;
overflow: hidden;
margin-left: -13px;
width: 40px;
height: 61px;
}
.price span.p0 {
background-position: 0px 0px;
width: 30px;
height: 61px;
margin-left: -5px;
}
.price span.p1 {
background-position: -49px 0px;
width: 32px;
height: 61px;
margin-left: -7px;
}
.price span.p2 {
background-position: -89px 0px;
width: 44px;
height: 61px;
margin-left: -7px;
}
.price span.p3 {
background-position: -138px 0px;
width: 40px;
height: 61px;
margin-left: -7px;
}
.price span.p4 {
background-position: -182px 0px;
width: 39px;
height: 61px;
margin-left: -9px;
}
.price span.p5 {
background-position: -228px 0px;
width: 40px;
height: 61px;
margin-left: -6px;
}
.price span.p6 {
background-position: -274px 0px;
width: 40px;
height: 61px;
margin-left: -6px;
}
.price span.p7 {
background-position: -322px 0px;
width: 35px;
height: 61px;
margin-left: -6px;
}
.price span.p8 {
background-position: -363px 0px;
width: 40px;
height: 61px;
margin-left: -9px;
}
.price span.p9 {
background-position: -410px 0px;
width: 40px;
height: 61px;
margin-left: -6px;
}
.price span.pc {
background-position: -457px 0px;
width: 23px;
height: 61px;
margin-left: -7px;
}
.price span.s0 {
background-position: -2px -68px;
width: 27px;
height: 45px;
margin-left: -8px;
}
.price span.s1 {
background-position: -47px -68px;
width: 24px;
height: 45px;
margin-left: -10px;
}
.price span.s2 {
background-position: -93px -68px;
width: 28px;
height: 45px;
margin-left: -8px;
}
.price span.s3 {
background-position: -137px -68px;
width: 30px;
height: 45px;
margin-left: -9px;
}
.price span.s4 {
background-position: -183px -68px;
width: 30px;
height: 45px;
margin-left: -8px;
}
.price span.s5 {
background-position: -231px -68px;
width: 26px;
height: 45px;
margin-left: -6px;
}
.price span.s6 {
background-position: -276px -68px;
width: 26px;
height: 45px;
margin-left: -6px;
}
.price span.s7 {
background-position: -321px -68px;
width: 24px;
height: 45px;
margin-left: -6px;
}
.price span.s8 {
background-position: -364px -68px;
width: 26px;
height: 45px;
margin-left: -6px;
}
.price span.s9 {
background-position: -410px -68px;
width: 26px;
height: 45px;
margin-left: -6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment