Dotted-border Mixin for Sass

In this example below you will see how to do a Dotted-border Mixin for Sass with some HTML / CSS and Javascript

Sometimes you need a dotted-border on an element, but your design calls for a bit more space between the dots than the default. This mixin allows you to specify the space between the dots as you wish. Updated 9/27/16: added optional position argument to mixin (default is 'bottom').

Thumbnail
This awesome code was written by poopsplat, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright poopsplat ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dotted-border Mixin for Sass</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  
  <h1>Dotted Border Mixin for Sass</h1>
  <p>For when you want to specify the spacing between dots on a dotted border.</p>
  
  <div class="box default">
    <h2>Default Dotted Border</h2>
  </div>
  
  <div class="box one">
    <h2>6px Spacing</h2>
  </div>
  
  <div class="box two">
    <h2>10px Spacing (top)</h2>
  </div>
  
  <div class="box three">
    <h2>16px Spacing</h2>
  </div>
  
  <div class="box related">
    <h2>Related Techniques:</h2>
    <ul>
      <li><a href="https://codepen.io/pixelass/pen/cdrwI">Pure CSS marching ants border by @pixelass</a></li>
      <li>
        <a href="https://codepen.io/jackarmley/pen/quybk">More flexible bespoke dotted border mixin by @jackarmley</a>
      </li>
    </ul>
  </div>
  
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/poopsplat/dotted-border-mixin-for-sass-xEIty */
.one h2 {
  color: #17BF7D;
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 6px 1px;
  background-image: linear-gradient(to right, #17BF7D 10%, rgba(255, 255, 255, 0) 0%);
  background-image: -webkit-linear-gradient(to right, #17BF7D 10%, rgba(255, 255, 255, 0) 0%);
}

.two h2 {
  color: #715DC7;
  background-position: top;
  background-repeat: repeat-x;
  background-size: 10px 1px;
  background-image: linear-gradient(to right, #715DC7 10%, rgba(255, 255, 255, 0) 0%);
  background-image: -webkit-linear-gradient(to right, #715DC7 10%, rgba(255, 255, 255, 0) 0%);
}

.three h2 {
  color: #BC4022;
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 16px 1px;
  background-image: linear-gradient(to right, #BC4022 10%, rgba(255, 255, 255, 0) 0%);
  background-image: -webkit-linear-gradient(to right, #BC4022 10%, rgba(255, 255, 255, 0) 0%);
}

body {
  color: #fefefe;
  background: #333;
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

a {
  color: inherit;
}

li {
  margin-bottom: 1em;
}

h2 {
  font-size: 24px;
  padding: 0.25em 0;
}

.container {
  padding: 0 40px;
  max-width: 600px;
  margin: 40px auto;
}

.box {
  padding: 10px 0;
}

.default h2 {
  color: #9C682C;
  border-bottom: 1px dotted;
}

.related h2 {
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 6px 1px;
  background-image: linear-gradient(to right, #fefefe 10%, rgba(255, 255, 255, 0) 0%);
  background-image: -webkit-linear-gradient(to right, #fefefe 10%, rgba(255, 255, 255, 0) 0%);
}

ul {
  padding: 0;
  list-style: none;
}

Comments