<p class="small">This font is smaller by a factor of 0.8!</p>
<p class="medium">This font is to scale.</p>
<p class="large">This font is larger by a factor of 1.2!</p>
<a class="button large">A pretty button</a>
$size: 18;
$px-unit: $size * 1px;
$px-string: $size+px;
$px-number: $px-unit/1px;

body {
  font-family: 'Lato';
  background: lightgreen;

.small {
  font-size: $px-unit*0.8;

.medium {
  font-size: $px-unit;

.large {
  font-size: $px-unit*1.2;

.button {
  background: rgba(255,0,0,$px-number*3/100);
  padding: $px-unit/2;
  //border-radius : $px-string*3;
  margin-top: $px-number*2px;
  display: inline-block;
  color: white;
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.