<div class="wrapper">
  <div class="rad-grad"></div>
  <div class="polka-dot-test"></div>
</div>

<div class="wrapper">
  <div class="polka-dot-default"></div>
</div>

<div class="wrapper">
  <div class="polka-dot"></div>
</div>
@mixin background-radial-gradient($value...){
  background: -moz-radial-gradient($value); 
  background: -webkit-radial-gradient($value);
  background: radial-gradient($value...);
}

@mixin background-size($value...){
  -moz-background-size: $value;
  -webkit-background-size: $value;
  background-size: $value;
}

.wrapper {
  margin-bottom: 1rem;  
}

.wrapper *{
  display: inline-block;
  margin-right: 1rem;  
}

.rad-grad {
  width: 100px;
  height: 100px;
  background: radial-gradient( 
    circle closest-side, 
    hsl(20, 95%, 70%), 
    hsl(20, 95%, 70%) 50%, 
    hsl(120, 95%, 70%) 50%, 
    hsl(120, 95%, 70%)
  );
 
}

.polka-dot-test {
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle closest-side, 
    hsl(20, 95%, 70%),  
    hsl(20, 95%, 70%) 50%, 
    hsl(120, 95%, 70%) 50%, 
    hsl(120, 95%, 70%)
  );
  background-size: 25px 25px;
}

@mixin polka-dot($width: 100px, $height: 100px, $color1: white, $color2: black, $dot_num: 3){
  width: $width;
  height: $height;
  @include background-radial-gradient(
    circle closest-side, 
    $color1,  
    $color1 50%, 
    $color2 50%, 
    $color2
  );
  @include background-size(($width/$dot_num) ($height/$dot_num));
}

.polka-dot-default {
  @include polka-dot();
}

.polka-dot {
  $width: 150px;
  $height: 150px;
  $color1: hsl(120, 90%, 70%);
  $color2: hsl(60, 90%, 70%);
  $num: 5;
  @include polka-dot($width, $height, $color1, $color2, $num);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.