Sass Bites #11 Code

1_index.html

<div class="box">
    <div class="arrow"></div>
</div>

2_original.scss

@import "compass";

.box {
    height: 200px;
    width: 200px;
    background: black;
    position: relative;
}

.arrow {
  background: black;
  position: absolute;
  bottom: -15px;
  left: 50%;
  @include translateX(-50%);
  height: 15px;
  width: 40px;
  &:before, &:after {
    content: "";
    background: white;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
}

3_mixin.scss

@import "compass";
@mixin rounded-arrow ($background, $height, $width) {
  background: $background;
  position: absolute;
  bottom: -$height;
  left: 50%;
  @include translateX(-50%);
  height: $height;
  width: $width;
  &:before, &:after {
    content: "";
    background: white;
    width: $width * 1.1;
    height: $height * 2;
    border-radius: 100%;
    position: absolute;
    top: 0;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
}

.box {
    height: 200px;
    width: 200px;
    background: black;
    position: relative;
}

.arrow {
    @include rounded-arrow(black, 20px, 60px);
}

4_advanced_mixin.scss

@import "compass";
@mixin rounded-arrow ($background, $height, $width, $direction:down) {
  background: $background;
  position: absolute;
  @if $direction == 'down' {
    bottom: -$height;
    left: 50%;
    @include translateX(-50%);
  }
  @else if $direction == 'right' {
    right: -$width;
    top: 50%;
    @include translateY(-50%);
  }
  height: $height;
  width: $width;
  &:before, &:after {
    content: "";
    background: white;
    @if $direction == 'down'{
      width: $width * 1.1;
      height: $height * 2;
    }
    @if $direction == 'right'{
      width: $width * 2;
      height: $height * 1.1;
    }
    border-radius: 100%;
    position: absolute;
    @if $direction == 'down'{
      top: 0;
    }
    @if $direction == 'right'{
      right: -100%;
    }
  }
  @if $direction == 'down' {
    &:before {
      left: 50%;
    }
    &:after {
      right: 50%;
    }
  }
  @if $direction == 'right' {
    &:before {
      top: 50%;
    }
    &:after {
      bottom: 50%;
    }
  }
}

.box {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    background: black;
    position: relative;
}

.arrow {
    @include rounded-arrow(black, 60px, 60px, left);
}