<div class="wrapper">
	<div class="container">
		<div class="element">
			<p>SASS Example</p>
			<svg width="400" height="250" viewBox="0 0 400 250">
				<rect x="0" y="0" width="400" height="250" fill="#eeeeee" />
				<text transform="translate(50, 50)" font-size="16" font-family="Arial">Ahh, I resize just in time...</text>
			</svg>
		</div>
	</div>
</div>
=viewport($property, $initialsize, $maxwidth, $unit:vw)
	#{$property}: ($initialsize*100)/$maxwidth#{$unit}

.wrapper
	width: 100%
	height: 100%
	font-family: Arial

.container
	max-width: 1000px
	width: 90%

.element
	width: 50%
	background-color: #cccccc
	padding: 20px

p
	text-align: center
	font-size: 24px

svg 
	width: 100%

@media only screen and (max-width: 910px)
	p 
		+viewport(font-size, 24, 910)

	svg
		+viewport(width, 400, 910)
		+viewport(height, 250, 910)
View Compiled
// For a Medium post
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.