Skip to content

Instantly share code, notes, and snippets.

@nessthehero
Created September 12, 2013 18:33
Show Gist options
  • Save nessthehero/6541932 to your computer and use it in GitHub Desktop.
Save nessthehero/6541932 to your computer and use it in GitHub Desktop.
Mixins
@mixin bp($point) {
@if $point == print {
@media only print { @content; }
}
}
@mixin em_width($px) { width: #{$px / 16}em; }
@mixin em_maxwidth($px) { max-width: #{$px / 16}em; }
@mixin em_margin($top:0,$right:0,$bot:0,$left:0) { margin: #{$top / 16}em #{$right / 16}em #{$bot / 16}em #{$left / 16}em }
@mixin em_padding($top:0,$right:0,$bot:0,$left:0) { padding: #{$top / 16}em #{$right / 16}em #{$bot / 16}em #{$left / 16}em }
@mixin em_fontsize($px) { font-size: #{$px / 16}em; }
// My setup for sprites
@import "../img/*.png";
@include all-img-sprites;
$sprites: logo_header cats;
@mixin sprite-dimensions($name) {
width: img-sprite-width($name);
height: img-sprite-height($name);
}
.sprite {
display: inline-block;
background-color: transparent;
}
@each $sprite in $sprites {
.#{$sprite} {
@include img-sprite($sprite);
@include sprite-dimensions($sprite);
}
}
@eightdotthree
Copy link

I forked and added min and max height and min width.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment