Helpful SCSS Mixins

_helpful-scss-mixins.scss

/*****************************************************************************

    SCSS Mixin Collection for Coders Using the Sass Preprocessor

    These mixins aid with layout, positioning, and display of elements in
    CSS authoring.

    This file uses the SCSS syntax. You can modify it if you use Sass syntax
    instead.

    These mixins support the standard syntax of flexbox and transform properties.

    Sections:
    -- Display
    -- Layout
    -- Positioning
    -- Shortcuts

*****************************************************************************/



/*****************************************************************************

    DISPLAY

*****************************************************************************/

/*****************************************************************************
    Block Children:
    Set immediate children as block elements.
*****************************************************************************/
@mixin block-children {
    > * {
        display: block;
    }
}

/*****************************************************************************
    Clearfix:
    Invoke layout of a parent element containing floating elements.
*****************************************************************************/
@mixin clearfix {
    &:after {
        content: '';
        clear: both;
        display: block;
    }
}

/*****************************************************************************
    Flexible Media:
    A responsive element such as img or video maxing out at its native width.
*****************************************************************************/
@mixin flex-media {
    display: block;
    max-width: 100%;
}

/*****************************************************************************
    Pseudo Absolute:
    Invoke layout on a pseudo element via absolute positioning.
*****************************************************************************/
@mixin pseudo-absolute {
    content: '';
    position: absolute;
}

/*****************************************************************************
    Pseudo Display:
    Invoke layout for a pseudo element.
*****************************************************************************/
@mixin pseudo-display($display) {
    content: '';
    display: $display;
}

/*****************************************************************************
    Responsive media:
    An responsive element such as img or video whose width is based on its
    parent's width.
*****************************************************************************/
@mixin responsive-media {
    display: block;
    width: 100%;
}

/*****************************************************************************
    Size:
    Set an element's width and height.
    Uses the same value for width and height if a single parameter is passed in.
    If two parameters are passed, the first will be width, and the second height.
*****************************************************************************/
@mixin size($size-value, $height-value: false) {
    @if ($height-value) {
        height: $height-value;
    } @else {
        height: $size-value;
    }
    width: $size-value;
}

/*****************************************************************************
    Word Wrap:
    Wrap long text with no spaces (like hyperlinks) to prevent text
    from extending boundaries.
*****************************************************************************/
@mixin word-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
}


/*****************************************************************************

    LAYOUT

*****************************************************************************/

/*****************************************************************************
    Auto Margin:
    Center an element without resetting top and bottom margins.
*****************************************************************************/
@mixin auto-margin {
    margin-left: auto;
    margin-right: auto;
}

/*****************************************************************************
    Direct Children Spacing:
    Add to a selector to target all its direct children.
    $margin-property can be any margin property.
*****************************************************************************/
@mixin direct-children-spacing($margin-property, $margin) {
    > * {
        #{$margin-property}: $margin;

        &:first-child {
            #{$margin-property}: 0;
        }
    }
}

/*****************************************************************************
    Flex Horizontal Ends:
    Apply to a parent container with two children to align one flush left
    and another one flush right.
*****************************************************************************/
@mixin flex-horizontal-ends($align) {
    align-items: $align;
    display: flex;
    justify-content: space-between;
}

/*****************************************************************************
    Flex Base Layout:
    Apply to a parent container to create a flexbox display.
*****************************************************************************/
@mixin flex-base-layout($align, $justify) {
    align-items: $align;
    display: flex;
    justify-content: $justify;
}

/*****************************************************************************
    Flexible Limited Container:
    Center an element with a maximum width.
*****************************************************************************/
@mixin flexible-limited-container($max-width) {
    @include auto-margin;
    max-width: $max-width;
}

/*****************************************************************************
    Limited Container:
    Center an element with a defined width.
*****************************************************************************/
@mixin limited-container($width) {
    @include auto-margin;
    width: $width;
}

/*****************************************************************************
    Serial Spacing:
    Apply consistent margin or padding to the same element selector
    or CSS class instances within a given parent.
*****************************************************************************/
@mixin serial-spacing($property, $spacing) {
    #{$property}: $spacing;
}

/*****************************************************************************
    Table Cell Align:
    Set table cell display and alignment option.
*****************************************************************************/
@mixin table-cell-align($alignment) {
    display: table-cell;
    vertical-align: $alignment;
}

/*****************************************************************************
    Table Full Width:
    Set full-width table display on an element.
*****************************************************************************/
@mixin table-full-width {
    display: table;
    width: 100%;
}

/*****************************************************************************
    Table Layout:
    Full-width table display with equal-width children.
*****************************************************************************/
@mixin table-layout {
    display: table;
    table-layout: fixed;
    width: 100%;

    > * {
        display: table-cell;
    }
}

/*****************************************************************************
    Truncated Text:
    Add ellipsis to text that is too long for its parent's boundaries.
*****************************************************************************/
@mixin truncated-text  {
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    white-space: nowrap;
}

/*****************************************************************************
    Vertical-Align Children:
    Set consistent alignment on immediate children elements.
*****************************************************************************/
@mixin vertical-align-children($alignment) {
    > * {
        display: inline-block;
        vertical-align: $alignment;
    }
}

/*****************************************************************************
    Vertical Align:
    Set alignment and inline-block display. Width can be removed if not needed.
*****************************************************************************/
@mixin vertical-align($alignment, $width) {
    display: inline-block;
    vertical-align: $alignment;
    width: $width;
}


/*****************************************************************************

    POSITIONING

*****************************************************************************/

/*****************************************************************************
    Absolute Center:
    Center an element vertically and horizontally.
*****************************************************************************/
@mixin absolute-center {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}


/*****************************************************************************
    Pinned:
    Absolute-positioned element with customizable values. Adjust $coordinate
    as needed.
*****************************************************************************/
@mixin pinned($coordinate: 0) {
    bottom: $coordinate;
    left: $coordinate;
    position: absolute;
    right: $coordinate;
    top: $coordinate;
}

/*****************************************************************************
    Pinned Left / Right:
    Adjust $coordinate as needed.
*****************************************************************************/
@mixin pinned-lr($coordinate: 0) {
    left: $coordinate;
    position: absolute;
    right: $coordinate;
}

/*****************************************************************************
    Position Wrappers:
    Add to container to position an element absolute on top of another
    element.
*****************************************************************************/
// Bottom Left
@mixin position-wrap-bl($left-coord,$bottom-coord) {
    bottom: $bottom-coord;
    left: $left-coord;
    position: absolute;
}

// Bottom Right
@mixin position-wrap-br($right-coord,$bottom-coord) {
    bottom: $bottom-coord;
    position: absolute;
    right: $right-coord;
}

// Top Left
@mixin position-wrap-tl($left-coord,$top-coord) {
    left: $left-coord;
    position: absolute;
    top: $top-coord;
}

// Top Right
@mixin position-wrap-tr($right-coord,$top-coord) {
    position: absolute;
    right: $right-coord;
    top: $top-coord;
}

/*****************************************************************************
    Vertically Centered:
    Center an element on the Y axis.
    If using an inline element like <span>, it must also have display: block
    when used with position: relative.
*****************************************************************************/
@mixin vertically-centered($position) {
    position: $position;
    top: 50%;
    transform: translate3d(0, -50%, 0);
}


/*****************************************************************************

    SHORTCUTS

*****************************************************************************/

/*****************************************************************************
    Calc:
    Calculates target value in ems, rems, or percentage.
*****************************************************************************/
@mixin calc($property, $target-value, $context-value, $measurement: false) {
    @if $measurement == "em" {
        #{$property}: ($target-value / $context-value) * 1em;
    } @else if $measurement == "rem" {
        #{$property}: ($target-value / $context-value) * 1rem;
    } @else {
        #{$property}: ($target-value / $context-value) * 100%;
    }
}