SCSS - markhowellsmead/helpers GitHub Wiki

Type checking

////
// A collection of function for advanced type checking
// @author Hugo Giraudel
////

@function is-number($value) {
  @return type-of($value) == 'number';
}
 
@function is-time($value) {
  @return is-number($value) and index('ms' 's', unit($value)) != null;
}
 
@function is-duration($value) {
  @return is-time($value);
}
 
@function is-angle($value) {
  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
}
 
@function is-frequency($value) {
  @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
}
 
@function is-integer($value) {
  @return is-number($value) and round($value) == $value;
}
 
@function is-relative-length($value) {
  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
}
 
@function is-absolute-length($value) {
  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
}
 
@function is-percentage($value) {
  @return is-number($value) and unit($value) == '%';
}
 
@function is-length($value) {
  @return is-relative-length($value) or is-absolute-length($value);
}
 
@function is-resolution($value) {
  @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
}
 
@function is-position($value) {
  @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null;
}

Simple grid mixin

$breakpoints: (
	'small':  0,
	'medium': 640,
	'large':  1400
) !default;

$gutter: 16 !default;

@mixin easygrid($number_of_columns) {
    .row {
        @include clearfix;

        position: relative;
        max-width: 100%;
        display: flex;
        flex-flow: row wrap;

        .column {
            padding-left: rem-calc($gutter);
            padding-right: rem-calc($gutter);
            min-height: rem-calc(1);
            width: 100%;
        }

        &.compact .column {
            padding-left: rem-calc($gutter/4);
            padding-right: rem-calc($gutter/4);
        }

        @each $breakpoint_name, $breakpoint_size in $breakpoints {
            @media print, screen and (min-width: rem-calc($breakpoint_size)) {
                @for $i from 1 through $number_of_columns {
                    .column.#{$breakpoint_name}-#{$i} {
                        max-width: percentage($i/$number_of_columns);
                        flex: 0 0 percentage($i/$number_of_columns);
                    }
                }
                .column.#{$breakpoint_name}-auto {
                    width: auto;
                    max-width: 100%;
                	min-width: 0;
                    flex: 1 1 0;
                }
            }
        }
    }
}

Loop: dynamic widths according to the number of items

(Source) Note that you might not need this, if you're using CSS Flexbox. That adjusts child element widths automatically.

@for $i from 1 through 4 {
	li:first-child:nth-last-child(#{$i}),
	li:first-child:nth-last-child(#{$i}) ~ li {
		width: 100% / #{$i};
	}
} 

Loop through config. array

$grid-column-gutter: (
  small: 0,
  medium: 5px,
  large: 10px,
  xlarge: 20px,
  xxlarge: 40px
);

@each $breakpoint, $gutter in $grid-column-gutter {
  @include breakpoint($breakpoint) {
    margin-left: rem-calc($gutter/2);
    margin-right: rem-calc($gutter/2);
  }
}

Social media icons with FontAwesome

@mixin socialmediaicon() {
	padding: 0 !important;
	@extend .fa;
	font-size: 20px;
	text-indent: -999rem;
	position: relative;
	width: 20px;
	&:before {
			display: inline-block;
			font-size: inherit;
			font-family: FontAwesome;
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			text-indent: 0;
	}
	&[href*="facebook.com"]:before {
			content: '\f230';
	}
	&[href*="instagram.com"]:before {
			content: '\f16d';
	}
	&[href*="twitter.com"]:before {
			content: '\f099';
	}
	&[href*="linkedin.com"]:before {
			content: '\f0e1';
	}
}

…and then, for example…

.nav.socialmedia a {
	@include socialmediaicon;
}

Mixins for simplification of typography

/**
 * Set custom typography sizes (e.g. header)
 * @param  {int} $size        font-size in pixels
 * @param  {int} $line-height line-height in pixels
 * @param  {int} $av          “AV” (letter-spacing value) from Adobe products like Photoshop or 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);
	}
}

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