Sass Theme Engine Blog

ex1.css

.post__title, 
.post__subtitle {
	color: black;
}

.theme--forest .post__title {
	color: forestgreen;
}

.theme--forest .post__subtitle {
	color: green;
}

ex10.scss

.theme--forest {
  @include theme-generator(
    $post__title: forestgreen,
    $post__subtitle: green
  );
}

.theme--ocean {
  @include theme-generator(
    $post__subtitle: navy
  );
}

ex11.scss

.theme--forest .post__title {
  color: forestgreen;
}

.theme--forest .post__subtitle {
  color: green;
}

.theme--ocean .post__subtitle {
  color: navy;
}

ex2.scss

.post__title, 
.post__subtitle {
	color: black;
}

.theme--forest {
  .post__title {
  	color: forestgreen;
  }
  
  .post__subtitle {
  	color: green;
  }
}

ex3.scss

.theme--forest {
  %theme--post__title {
    color: forestgreen;
  }
}

.theme--ocean {
  %theme--post__title {
    color: navy;
  }
}

.post__title {
  @extend %theme--post__title;
  color: black;
}

ex4.css

.theme--forest .post__title {
  color: forestgreen;
}

.theme--ocean .post__title {
  color: navy;
}

.post__title {
  color: black;
}

ex5.scss

.theme--forest {
  @include theme-generator(
    forestgreen,
    green
  );
}

ex6.scss

.post__title {
  @extend %theme--post__title;
  color: black;
}

.post__subtitle {
  @extend %theme--post__subtitle;
  color: black;
}

ex7.scss

@mixin theme-generator(
  $post__title,
  $post__subtitle
) {
  
  %theme--post__title {
    color: $post__title;
  }
  
  %theme--post__subtitle {
    color: $post__subtitle;
  }
}

ex8.scss

@mixin theme-generator(
  $post__title: "",
  $post__subtitle: ""
) {
  
  @if $post__title != "" {
    %theme--post__title {
      color: $post__title;
    }
  }
  
  @if $post__subtitle != "" {
    %theme--post__subtitle {
      color: $post__subtitle;
    }
  }

}

ex9.scss

.post__title {
  @extend %theme--post__title !optional;
  color: black;
}

.post__subtitle {
  @extend %theme--post__subtitle !optional;
  color: black;
}