Generated by SassMeister.com.

sass-maps-validation.scss

// ----
// libsass (v3.2.5)
// ----

/*$color--primary: #b29;
$color--secondary: #19d;

@mixin btn-me($color: hotpink, $size: normal) {
  border: 1px solid $color;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  @if $size == 'small' {
    font-size: .8em;
  } @else {
    font-size: 1.2em;
  }

  &:hover {
    color: white;
    background: $color;
  }
}

%btn--primary {
  @include btn-me; // no arguments means it takes defaults
}

.hero__btn {
  @extend %btn--primary;
}*/
$padding-TB: 1em;
$padding-RL: 1.5em;
$tablet: 768px;
$white-color: #ffffff;
$fontlight: "Elysio-Light", Helvetica, Arial, sans-serif;
$visit-color: #A1164E;
$take-part-color: #fff;

@mixin title-bar($sectionBGcolor: $visit-color) {
	background-color: $sectionBGcolor;
}

%placeholder_title-bar {
	padding: $padding-TB/2 $padding-RL/2;
	margin-top: 0;
	margin-bottom: 0;
	//TODO: remove dependency on h1 and h2 element (rename to class)
	h1 {
		padding: 0;
		color: $white-color !important;
	}

	p {
		color: $white-color;
		font-family: $fontlight;
		margin: 0;
		padding: 0;
	}

	@media screen and (min-width: $tablet) {
		padding: $padding-TB $padding-RL;

		p {
			font-size: 1.25em;
		}
	}
}

.title-bar {
  @extend %placeholder_title-bar;
}

.visit {
  .title-bar {
    @include title-bar($visit-color);
  }
}
.take-part {
  .title-bar {
    @include title-bar($take-part-color);
  }
}

SassMeister-output.css

/*$color--primary: #b29;
$color--secondary: #19d;

@mixin btn-me($color: hotpink, $size: normal) {
  border: 1px solid $color;
  border-radius: 1.5em;
  background: none;
  outline: none;
  transition-duration: .25s;
  cursor: pointer;
  margin: 30px;
  padding: .5em 1em;

  @if $size == 'small' {
    font-size: .8em;
  } @else {
    font-size: 1.2em;
  }

  &:hover {
    color: white;
    background: $color;
  }
}

%btn--primary {
  @include btn-me; // no arguments means it takes defaults
}

.hero__btn {
  @extend %btn--primary;
}*/
.title-bar {
  padding: 0.5em 0.75em;
  margin-top: 0;
  margin-bottom: 0;
}

.title-bar h1 {
  padding: 0;
  color: #ffffff !important;
}

.title-bar p {
  color: #ffffff;
  font-family: "Elysio-Light", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .title-bar {
    padding: 1em 1.5em;
  }
  .title-bar p {
    font-size: 1.25em;
  }
}

.visit .title-bar {
  background-color: #A1164E;
}

.take-part .title-bar {
  background-color: #fff;
}