Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

// Variables Data Types

//Numbers
$number-two: 2;
$number-golden-ratio: 1.618;
$number-px: 10px;
$number-rem: 1.33333rem;

.number-example {
  fee: $number-two;
  fi: $number-golden-ratio;
  fo: $number-px;
  fum: $number-rem;
  
  // Opertators with Numbers
  fee-fum: $number-two * $number-rem; // One unitless + unit number works
  //fo-fum: $number-px + $number-rem; - Won't work with mixed units
}

// Strings 
$string-author: "Isaac Asimov";
$string-book: "Foundation";

.string-example {
  foo: $string-author;
  bar: $string-book;
  foobar: $string-author + " - " + $string-book;
}

$color: blue;
$color: #f0f;
$color: rgba(255, 0, 255, 0.5);
$color: rgba(#f0f, 0.5);

$boolean: true;
$boolean: false;

$list: red green blue;
$list: red, green, blue;
$list: (red green blue);
$list: (red, green, blue);
$list: (
  red,
  green,
  blue
);

$interpolation: "Fifteen #{10 + 5}";



$string: "Some string";

$color: blue;
$color: #f0f;
$color: rgba(255, 0, 255, 0.5);
$color: rgba(#f0f, 0.5);

$boolean: true;
$boolean: false;

$list: red green blue;
$list: red, green, blue;
$list: (red green blue);
$list: (red, green, blue);
$list: (
  red,
  green,
  blue
);

$interpolation: "Fifteen #{10 + 5}";


.example {
 color: $color; 
}

SassMeister-output.css

.number-example {
  fee: 2;
  fi: 1.618;
  fo: 10px;
  fum: 1.33333rem;
  fee-fum: 2.66666rem;
}

.string-example {
  foo: "Isaac Asimov";
  bar: "Foundation";
  foobar: "Isaac Asimov - Foundation";
}

.example {
  color: rgba(255, 0, 255, 0.5);
}