Skip to Content


Assists the arrow() mixin for arrow placement.

Sass February 22, 2017


arrow_helper($arrowSize, $arrowColor, $margin, $side, $align)


(Required) (String) The size of the arrow
Default: None

(Required) (String) The color of the arrow
Default: None

(Required) (String) The margin of the alignment
Default: None

(Required) (String) The side of the element
Default: None

(Required) (String) The alignment of the arrow
Default: None

Request or provide clarification »

Additional Notes

This mixin is a supportive function, so it does not need to be called specifically. Use arrow() itself.

Source File

Located in /assets/scss/partials/_mixins.scss on line 297.

@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
    @if $side == "top" {
        border-bottom-color: $arrowColor; top: -2 * $arrowSize;
    @if $side == "bottom" {
        border-top-color: $arrowColor; bottom: -2 * $arrowSize;
    @if $side == "left" {
        border-right-color: $arrowColor; left: -2 * $arrowSize;
    @if $side == "right" {
        border-left-color: $arrowColor; right: -2 * $arrowSize;
    @if $side == "right" or $side == "left" {
        @if $align == "center" {
            top: 50%; margin-top: -$arrowSize;
        } @else if $align == "top" {
            top: $margin;
        } @else if $align == "bottom" {
            bottom: $margin;
    @if $side == "bottom" or $side == "top" {
        @if $align == "center" {
            right: 50%; margin-right: -$arrowSize;
        } @else if $align == "left" {
            left: $margin;
        } @else if $align == "right" {
            right: $margin;


To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align){
    //Write your own code here, leave it blank, or return false.