circle

view source

Create a CSS circle.

use-name

scut-circle

type

mixin only

arguments

$size
One value becomes both width and height.
$color

default

inherit

compatibility

This utility uses border-radius, which is not supported in IE8 — so IE8 will just get what it deserves: squares.

By default, the circle will inherit the color of its parent's text. Or you can designate a color yourself.

If you want to add a border to your circle, you must declare a color.

example

SCSS

.eg-circle-1 {
  @include scut-circle(1em);
}
.eg-circle-2 {
  @include scut-circle(2em, $eg-light);
}
.eg-circle-3 {
  @include scut-circle(2em, $eg-dark);
  border: 5px solid $eg-light;
}

compiled CSS

.eg-circle-1 {
  border-radius: 50%;
  display: inline-block;
  border-width: 0.5em;
  border-style: solid;
  height: 0;
  width: 0;
}

.eg-circle-2 {
  border-radius: 50%;
  display: inline-block;
  background-color: #9AE9FF;
  height: 2em;
  width: 2em;
}

.eg-circle-3 {
  border-radius: 50%;
  display: inline-block;
  background-color: #002834;
  height: 2em;
  width: 2em;
  border: 5px solid #9AE9FF;
}

example

SCSS

compiled CSS

Result