The end of the year is here, and it’s a time to kick back and enjoy ourselves and our families; a time to have some fun. A time to build a set of minimalist Teenage Mutant Ninja Turtle characters in CSS! Outside of being a fun exercise in general, this is a great look into how you can use the concept of inheritance and a swanky Sass mixin to write easily themed and reusable front-end components.
Since this is a theming lesson using ninja turtles, there’s no better application than comparing the 1987 TV series to the 2012 series. Let’s get started.
The Parent Turtle
We’ll begin by defining all of the common styles that will make up a ninja turtle, regardless of who that turtle is or from what series they hail. The element itself should have a .turtle class, and we’ll give it two children, .mask and .shell. We’ll eventually want four of these things on the page, so let’s make it a list item inside of an unordered list.
See the Pen Half Shell Zero by Zach Handing (@zachhanding) on CodePen.
Add the styling for the legs in ::before and ::after pseudo-elements, then move on to the mask and shell. No mask color yet, since this is just our base class for the turtles. Little guy’s starting to look pretty cute!
Let’s Start Mixin It Up
Now to make each individual (and quite unique) turtle brother, we will inherit those styles we just wrote and add on features as needed, chiefly their mask and skin color. All of these styles will be inherited because we’re using the same HTML markup for each series turtle as we did for our parent turtle. Since we’re using the same markup, the same styles get applied to every turtle; making them unique is simply a matter of apply additional styling where needed. Codepen does a great job of this by allowing any pen to link to a separate pen, which is what I’ve done with the next two examples.
Note: the 1987 turtles all have the same color skin (do turtles have skin?), but we’re writing this component to future proof it in case we come across a scenario where the turtles need to have different skin tones (e.g. the 2012 turtles).
Something like the following is what we’re after, complete with named parameters and default values:
$leo-green: #4c9c23;
$leo-blue: #09b6e1;
@mixin theme-turtle($skin: green, $mask: transparent) {
background: $skin;
.mask {
background: $mask;
}
}
.turtle.leo {
@include theme-turtle($skin: $leo-green, $mask: $leo-blue);
}
Of course we have to add a bit more flair to make these guys resemble their television counterparts, which is done by adding some more optional parameters in our mixin. Be sure to check out the full SCSS source for each series, and let me know which you prefer!
1987 TMNT
Defined by their very uniform look, with the only discernible differences being their mask and knee-pad colors, and their adorable monogrammed belts.
See the Pen Half Shell Heroes (1987) by Zach Handing (@zachhanding) on CodePen.
2012 TMNT
A grungier look for a generation less amused by bright colors, these turtles add in leg wraps and shoulder straps. They also give us the opportunity to write a Sass function for calculating their heights!
See the Pen Half Shell Heroes (2012) by Zach Handing (@zachhanding) on CodePen.
