Math Formula Implementation with CSS3 and SASS

We can style elements using simple Math with CSS3 property calc property. We can define one element width by using arithmetic operations like Addition, Multiplication, Division.

Using calc :

Lets define HTML elements left property with CSS3
left : calc(50% + 100px); (Addition)
left : calc(50% - 100px); (Subtraction)
left : calc(25% * 2); (Multiplication)
left : calc(25% / 2); (Division)

Using SASS :

Lets use SASS for high level Math operations. SASS provides some interesting Math functions for styling elements.

pi()

sin($number)

cos($number)

tan($number)

logarithm($number, $base)

sqrt($number)

pow($number, $exponent)

Now I will arrange HTML elements on Circle with Trigonometry

Formula for Circle in Trigonometry :
X = X - Coordinate
Y = Y - Coordinate
R = Radius of Circle
X = R cosθ
Y = R sinθ

HTML markup of 12 div elements :

<div></div>
<div></div>
<div></div>
......9 more divs

SASS code :

This below code will apply Left and Top positions based on nth-child property.

$class: div !default

$radius: 300

$angle: 30deg

@for $i from 1 through 12
  #{$class}:nth-child( #{$i} )
    left: #{$radius+ ($radius*cos( ($i - 1) * $angle)) }px
    top: #{$radius+ ($radius*sin( ($i - 1) * $angle)) }px

      
div
  width : 10px
  height : 10px
  border : 1px solid #ccc
  position : absolute 
  background-color : #ff0000

Demo :

See the Pen Arrange elements on Circle with Trigonometry by srinivas (@srinivasD) on CodePen.

FtMocks