Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Sass Mixins</h1>
<h2>are pretty great</h2>

<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, aliquid, iure, placeat, in nesciunt nostrum deserunt veritatis quidem voluptatibus ab explicabo temporibus minus eaque laudantium ipsum sit vero quis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur, quo! Aspernatur, reprehenderit, officia tempore fugit pariatur blanditiis culpa numquam porro magni enim illum repellat dolore mollitia corporis sunt debitis?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quia culpa labore voluptatem assumenda ab nam similique deleniti. Explicabo quisquam molestiae quo modi qui deserunt quibusdam quod doloribus rem ratione.</p>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----


/* define a group of CSS rules that we want to re-use throughout our code */
/* create a temporary vairable called $fontsize so we can change the font-size
every time we re-use this code. Give $fontsize a default of 30px */
/* Try changing values in the mixin and see how the complied CSS
updates in multiple places. */

@mixin flashy-text($fontsize: 30px) {
    font-family: "Papyrus", serif;
    font-size: $fontsize;
    font-weight: bold;
    color: DarkSlateGray;
}

 /* include the flashy-text mixin */
p.intro {
  @include flashy-text();
}

/* include the flashy-text mixin, using the option to change font-size this time */
h1 {
  @include flashy-text(60px);
  /* you can add other css to this selector still*/
  margin-bottom: 30px;
  border-bottom: solid 1px purple;
}

body {
  font-family: sans-serif;
}

SassMeister-output.css

/* define a group of CSS rules that we want to re-use throughout our code */
/* create a temporary vairable called $fontsize so we can change the font-size
every time we re-use this code. Give $fontsize a default of 30px */
/* Try changing values in the mixin and see how the complied CSS
updates in multiple places. */
/* include the flashy-text mixin */
p.intro {
  font-family: "Papyrus", serif;
  font-size: 30px;
  font-weight: bold;
  color: DarkSlateGray;
}

/* include the flashy-text mixin, using the option to change font-size this time */
h1 {
  font-family: "Papyrus", serif;
  font-size: 60px;
  font-weight: bold;
  color: DarkSlateGray;
  /* you can add other css to this selector still*/
  margin-bottom: 30px;
  border-bottom: solid 1px purple;
}

body {
  font-family: sans-serif;
}

SassMeister-rendered.html

<h1>Sass Mixins</h1>
<h2>are pretty great</h2>

<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, aliquid, iure, placeat, in nesciunt nostrum deserunt veritatis quidem voluptatibus ab explicabo temporibus minus eaque laudantium ipsum sit vero quis et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur, quo! Aspernatur, reprehenderit, officia tempore fugit pariatur blanditiis culpa numquam porro magni enim illum repellat dolore mollitia corporis sunt debitis?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quia culpa labore voluptatem assumenda ab nam similique deleniti. Explicabo quisquam molestiae quo modi qui deserunt quibusdam quod doloribus rem ratione.</p>