SCSS Mixins - markhowellsmead/helpers GitHub Wiki

Clamp

Clamp for PHP

public function clamp(float|string $minSize, float|string $maxSize, int $minWidth = 375, int $maxWidth = 1440)
{

	if (!is_float($minSize)) {
		$minSize = floatval($minSize);
	}

	if (!is_float($maxSize)) {
		$maxSize = floatval($maxSize);
	}

	if (!$minSize || !$maxSize) {
		return '';
	}

	// convert to rem
	$minSize = $minSize / 16;
	$maxSize = $maxSize / 16;
	$maxWidth = $maxWidth / 16;
	$minWidth = $minWidth / 16;

	// do calculations
	$slope = (($maxSize - $minSize) / ($maxWidth - $minWidth));
	$yAxisIntersection = -$minWidth * $slope + $minSize;
	$slope = $slope * 100;
	$preferredValue = "{$yAxisIntersection}rem + {$slope}vw";

	return "clamp({$minSize}rem, {$preferredValue}, {$maxSize}rem)";
}

Clamp for SCSS

font-size: sht-clamp(28,50);
column-gap: sht-clamp(10,30); 

…

@function sht-clamp($minSize, $maxSize, $minWidth: 375, $maxWidth: 1440) {
    // convert to rem
    $minSize: calc($minSize / 16);
    $maxSize: calc($maxSize / 16);
    $maxWidth : calc($maxWidth / 16);
    $minWidth : calc($minWidth / 16);

    // do calculations
    $slope: calc(($maxSize - $minSize) / ($maxWidth - $minWidth ));
    $yAxisIntersection: -$minWidth * $slope + $minSize;
    $preferredValue: "#{($yAxisIntersection * 1rem)} + #{($slope * 100vw)}";

    // output as rem
    $minSize: $minSize * 1rem;
    $maxSize: $maxSize * 1rem;
    @return clamp($minSize, #{$preferredValue}, $maxSize);

}

Overflow ellipsis

Crop text on a single line with ellipsis

@mixin overflow-ellipsis(){
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Custom typography sizes

/**
 * Set custom typography sizes (e.g. header)
 * @param  {int} $size        font-size
 * @param  {int} $line-height line-height
 * @param  {int} $av          AV letter-spacing from XD
 * @return {void}
 */

@mixin typo($size: null, $line-height: null, $av: null) {
	@if ($size) {
		font-size: rem-calc($size*$global-font-size/100);
	}
	@if ($size) {
		@if ($line-height) {
			line-height: ($line-height/$size);
		}
	}
	@if ($av) {
		@include av($av);
	}
}

// AV letter spacing measurement convertor from Adobe applications
// https://scotch.io/tutorials/converting-photoshop-letter-spacing-to-css
@mixin av($size) {
	letter-spacing: ($size / 1000) * 1em;
}

Make element “flood” (fill) its container

Add position: relative to the container.

@mixin flood(){
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	display: block;
	background-color: rgba(255,255,255,.01); /* This makes sure that the entire object is clickable in IE */
}

Social media navigation

Replace plain links with SVG icons, and hide the text itself using text-indent.

@mixin socialmediaicon() {
	padding: 0 !important;
	font-size: 0;
	text-indent: -999rem;
	position: relative;
	width: 28px;
	height: 28px;
	&:before {
		display: inline-block;
		content: '';
		font-size: inherit;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		text-indent: 0;
		background: transparent center/contain no-repeat;
	}
	&[href*="facebook.com"]:before {
		background-image: url('../images/icons/facebook.svg');
	}
	&[href*="instagram.com"]:before {
		background-image: url('../images/icons/instagram.svg');
	}
	&[href*="twitter.com"]:before {
		background-image: url('../images/icons/twitter.svg');
	}
	&[href*="xing.com"]:before {
		background-image: url('../images/icons/xing.svg');
	}
	&[href*="linkedin.com"]:before {
		background-image: url('../images/icons/linkedin.svg');
	}
	&[href*="plus.google.com"]:before {
		background-image: url('../images/icons/googleplus.svg');
	}
	&[href*="youtube."]:before,
	&[href*="youtu.be"]:before {
		background-image: url('../images/icons/youtube.svg');
	}
	&[href*="mailto:"]:before {
		background-image: url('../images/icons/email.svg');
	}
}