Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

/* Example 1 */

@mixin text-1 {
  font-size: 1.5rem;
  color: red;
}

.text-1-example {
  @include text-1;
}

/* Example 2 */

@mixin text-2($color) {
  font-size: 1.5rem;
  color: $color;
}

.text-2-example {
  @include text-2(deeppink);
}

/* Example 3 */

@mixin text-3($color:green) {
  font-size: 1.5rem;
  color: $color;
}

.text-3-example-a {
  @include text-3;
}

.text-3-example-b {
  @include text-3(lime);
}

/* Example 4 */

@mixin text-4($color:green, $size:1.5rem) {
  font-size: $size;
  color: $color;
}

.text-4-example-a {
  @include text-4(tomato, 0.875rem);
}

.text-4-example-b {
  @include text-4(gold);
}

.text-4-example-c {
  @include text-4(
    $size: 2rem,
    $color: navy
  );
}

SassMeister-output.css

/* Example 1 */
.text-1-example {
  font-size: 1.5rem;
  color: red;
}

/* Example 2 */
.text-2-example {
  font-size: 1.5rem;
  color: deeppink;
}

/* Example 3 */
.text-3-example-a {
  font-size: 1.5rem;
  color: green;
}

.text-3-example-b {
  font-size: 1.5rem;
  color: lime;
}

/* Example 4 */
.text-4-example-a {
  font-size: 0.875rem;
  color: tomato;
}

.text-4-example-b {
  font-size: 1.5rem;
  color: gold;
}

.text-4-example-c {
  font-size: 2rem;
  color: navy;
}