SASS

Function example

by Ben Clayton

HTML

<div class="message">
Hello World
</div>

The function can accept 0 or more arguments and do calculations. The function returns a single value which can be used in place of CSS property value.<br/>
Don't confuse with jQuery which can intergate the DOM.

SCSS

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}


.message {
  border:1px solid red;
  width: calc-percent(500px,1000px)
}