MIXINS - Compass (SCSS, SASS)

_mixins.scss

_

sprites.scss

@import "compass";
@import "compass/css3";
@import "compass/css3/user-interface";
@import "compass/utilities/sprites";



/* =============================================================================
 * ICON SPRITE klk4
 * ========================================================================== */

// @import "compass/utilities/sprites";
// $btn-sprite-base-class: '.icon';
// $btn-spacing: 10px;
// $btn-new-position: 50%;
// @import "btn/*.png";
// @include all-btn-sprites;
$icons: sprite-map("icon/*.png");
$namelist: sprite-names($icons);

$orginalHeight: image-height(sprite-file($icons, nth($namelist, 1)));
$icon-height: 38px;
$icon-width: $icon-height;

$medium-height: 50px;
$large-height: 75px;

.icon{
	position: relative;
	display: inline-block;
	height: $icon-height;//image-height(sprite-file($icons, nth($namelist, 1)));
	width: $icon-width;//image-width(sprite-file($icons, nth($namelist, 1)));
	background: sprite-url($icons) no-repeat;
	background-size: 100% auto;
	.medium &{
		height: $medium-height;
		width: $medium-height;
	}
	.large &{
		height: $large-height;
		width: $large-height;
	}
}
// $i: 0;
// $len: 100/(length($namelist) - 1);
@each $sprite-name in sprite-names($icons){
	//$classname: str_replace($sprite-name, '_', '.');
	//$tmp: $len * $i * 1%;
	.#{$sprite-name}{
		//background-position: sprite-position($icons, $sprite-name);//0 #{$tmp};//
		background-position: 0 (nth(sprite-position($icons, $sprite-name), 2) / $orginalHeight * $icon-height);
		.medium &{
			background-position: 0 (nth(sprite-position($icons, $sprite-name), 2) / $orginalHeight * $medium-height);
		}
		.large &{
			background-position: 0 (nth(sprite-position($icons, $sprite-name), 2) / $orginalHeight * $large-height);
		}

		//background-position: sprite-position($icons, $sprite-name, 0, -13px);
		//background-position: 0 (nth(sprite-position($icons, $sprite-name), 2) / 2);
	}
	// $i: $i + 1;
}

stop-browser-button-behavior.scss

/* mixins and functions */
@import "compass/css3";
@import "compass/css3/user-interface";
// add styles and attributes to the element to prevent the browser from doing
// its native behavior. this doesnt prevent the scrolling, but cancels
// the contextmenu, tap highlighting etc
@mixin stop-browser-button-behavior(){
	@include user-select('none');
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	-o-user-drag: none;
	user-drag: none;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
	-ms-tap-highlight-color: rgba(0, 0, 0, 0);
	-o-tap-highlight-color: rgba(0, 0, 0, 0);
	highlight-color: rgba(0, 0, 0, 0);
}