SCSS IPhone

iphone.html

<div id="iphone">
	<div class="camera"></div>
	<div class="speaker"></div>
	<div class="screen"></div>
	<div class="button"></div>
</div>

iphone.scss

$multiplier: 20;

//////////////////////////////////
// Heights, widths, and borders //
//////////////////////////////////

$iphone-width: 1vw * $multiplier;
$iphone-height: 2.06vw * $multiplier;
$iphone-border-width: 0.0075vw * $multiplier;
$iphone-border-radius: 0.15vw * $multiplier;

$screen-width: 0.865vw * $multiplier;
$screen-height: 1.551vw * $multiplier;

$speaker-height: 0.02vw * $multiplier;
$speaker-width: 0.18vw * $multiplier;
$speaker-border-radius: 0.04vw * $multiplier;

$camera-height: 0.03vw * $multiplier;
$camera-width: 0.03vw * $multiplier;
$camera-border-radius: $camera-width;

$button-height: 0.18vw * $multiplier;
$button-width: 0.18vw * $multiplier;
$button-border-radius: $button-width;


///////////////////////
// calculated values //
///////////////////////

// space between screen and case
$horizontal-screen-padding: ($iphone-width - $screen-width) / 2;
$vertical-screen-padding: ($iphone-height - $screen-height) / 2;

// space between speaker and case
$vertical-speaker-padding: ($vertical-screen-padding / 2) - ($speaker-height / 2);
$horizontal-speaker-padding: ($iphone-width / 2) - ($speaker-width / 2);

// space between camera and case
$horizontal-camera-padding: $multiplier * 0.32vw;
$vertical-camera-padding: ($vertical-screen-padding / 2) - ($camera-height / 2);

// space between button and case 
$horizontal-button-padding: ($iphone-width / 2) - ($button-width / 2);
$vertical-button-padding: (1.5 * $vertical-screen-padding + $screen-height) - ($button-height / 2);



#iphone
{
	position: relative;
	width: $iphone-width;
	height: $iphone-height;
	background-color: #333;
	border-radius: $iphone-border-radius;
	border: $iphone-border-width solid #ccc;

	.camera
	{
		position: absolute;
		left: $horizontal-camera-padding;
		top: $vertical-camera-padding;

		width: $camera-height;
		height: $camera-width;
		border-radius: $camera-border-radius;
		background-color: #000;
	}
	.speaker
	{
		position: absolute;
		top: $vertical-speaker-padding;
		left: $horizontal-speaker-padding;

		width: $speaker-width;
		height: $speaker-height;
		background-color: #000;
		border-radius: $speaker-border-radius;
	}
	.screen
	{
		position:absolute;
		top: $vertical-screen-padding;
		left: $horizontal-screen-padding;
		background-color: #000;
		width: $screen-width;
		height: $screen-height;

	}
	.button
	{
		position: absolute;
		top: $vertical-button-padding;
		left: $horizontal-button-padding;

		background-color: #000;
		width: $button-width;
		height: $button-height;
		border-radius: $button-border-radius;
	}
}

A CSS iphone created with SCSS and HTML. Made to resemble the iPhone 6