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.

Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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

    @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.