scss HANDY MIXINS

Posted 2021-05-18

// HIDE but remain accessible for screen readers
//
@mixin visuallyhidden {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
}

// Center Block
//
@mixin center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

// Easy horizontal & vertical centering of anything in IE9+
//
@mixin absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

// Easy vertical centering of anything in IE9+
//
@mixin vertical-center {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
}

// STYLING SELECTED TEXT
// use like this: @include selection( #000, #ccc );
@mixin selection( $background, $foreground:#fff ) {
	::-moz-selection { 
		background: $background;
		color: $foreground;
		text-shadow: none; 
	}
	::selection { 
		background: $background;
		color: $foreground;
		text-shadow: none; 
	}
}