Mixin And Include

// Mixin And Include

ul.links {
  @include list-reset;
}

.circle-100 {
  @include circle(100px);
  background-color: red;
  color: white;
}

.circle-200 {
  @include circle(200px);
  background-color: red;
  color: white;
}

.center-circle {
  @include circle(400px);
  @include centering;
}

@mixin list-reset {
  padding: 0;
  margin: 0;
  list-style: none;
}

@mixin circle($dimensions) {
  border-radius: 50%;
  width: $dimensions;
  height: $dimensions;
}

@mixin centering {
  display: flex;
  justify-content: center;
  align-items: center;
}