wings.sass (mixins)

wing.sass

@mixin wings(
    $wing_width,
    $wing_height,
    $wing_top,
    $wing_left,
    $wing_right,
    $wing_img_height,
    $wing_br,
    $wing_color) {
        & a.left, 
        & a.right,{
            display: block;
            position: absolute;
            background-color: none;
            width: $wing_width; 
            height: $wing_height;
            top: $wing_top;
        }
        
        &  a.left{
            background-color: none;    
            left: $wing_left;
        }
        
        & a.right{
            background-color: none;
            right: $wing_right;
        }
        
        & div.wing{
            display: block;
            position: relative;
            background-color: $wing_color;
            width: $wing_width; 
            height: $wing_height;
            border-radius: $wing_br;
        
            & .img{
                background-size: cover;
                background-position: center;
                display: block;
                padding: 0px;
                margin: 0px;
                width: $wing_width;
                height: $wing_img_height;
                border-radius: $wing_br;
            }
        }
}


/*
$wing_width: 100px;
$wing_height: 360px;
$wing_top: 58px;
$wing_left: -89px;
$wing_right: -89px;
$wing_img_height: 205px;
$wing_br: 3px;
$wing_color: white;
*/
main.pose{
    @include wings(
         100px,
         360px,
         58px,
        -89px,
        -89px,
         205px,
        3px,
        white
    );
}

// Iphone 6
@media (min-width: 374px) {
    /*
    $wing_width: 100px;
    $wing_height: 450px;
    $wing_top: 58px;
    $wing_left: -89px;
    $wing_right: -89px;
    $wing_img_height: 257px;
    $wing_br: 3px;
    $wing_color: red;
    */
    main.pose{
    @include wings(
             100px,
             450px,
             58px,
             -89px,
             -89px,
             257px,
             3px,
             red
        );
    }
}

// Iphone 6+ 
@media (min-width: 413px) {
    /*
    $wing_width: 100px;
    $wing_height: 538px;
    $wing_top: 58px;
    $wing_left: -89px;
    $wing_right: -89px;
    $wing_img_height: 322px;
    $wing_br: 3px;
    $wing_color: blue;
    */
        main.pose{
            @include wings(
            100px,
            538px,
                58px,
                -89px,
            -89px,
                322px,
                3px,
            blue
            );
        }
    }