Speech Bubble SASS Mixin

The following code will allow you easily create speech bubble banners in CSS using SASS mixins. Since pseudo-classes such as :before or :after was introduced into CSS we have been able to do so much more using just CSS. For example with CSS we can now create a number of different shapes as you can see in this tutorial. How To Create Shapes In CSS From this tutorial we can see how to create a speech bubble shape by combining two shapes together, the rectangle and the triangle shape, allowing us to style elements like this.

This is done with the following CSS.

.speech-bubble
{
  background: #ddd;
  display: inline-block;
  padding: 15px;
  position: relative;
  margin-left: 15px;
  height:100px;
  width:400px;
}
.speech-bubble:before
{
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-right: 15px solid #ddd;
  border-bottom: 7px solid transparent;
}

Because there are a few calculations and duplicate colours in this CSS code it is perfect to use as a SASS mixin and then we can reuse this code in another area of the website with different size speech bubbles if we need to. If you are not familiar with SASS and the benefits it can provide you with your CSS then you should have a look at this article about getting started with SASS.

To create a SASS mixin you need to use the keyword @mixin and then rest of the syntax is similar to a function you will see in other languages. The text inside the mixin will be output on the CSS property this is applied to. To start off we are going to pass in two parameters the size of the speech bubble and the background colour, these are important to pass through as parameters as these are really the only properties that are going to need to change. From the $size parameter we need to set the margin-left of the box, this makes room for the triangle at the start of the bubble. We will also use this $size to calculate the size of the triangle.

@mixin speech-bubble($size, $background)
{
  background: $background;
  display: inline-block;
  padding: $size;
  position: relative;
  margin-left: $size;

  &:before
  {
    content: '';
    position: absolute;
    left: -$size;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-top: ($size / 2) solid transparent;
    border-right: $size solid $background;
    border-bottom: ($size / 2) solid transparent;
  }
}

To use this mixin we need to use the @include keyword and pass in the two parameters. When SASS is compiled it will output the CSS needed to create the speech bubble.

.speech-bubble
{
   @include speech-bubble(15px, #1e252b);
}