Sassy Shapes Exercise

Objective

For this exercise, you will create the necessary CSS to display three different shapes each in five different colors. Each shape / color combination will be represented by a class with the name shape-color. (ex. .square-red). Sass will be used to generate all the necessary CSS.

Starter Files

Download the Sassy Shapes starter files.

Requirements

The following requirements must be met in order to complete the assignment successfully:

1. Create a single mixin, shape, that will be used to create the CSS for a specific shape and color.
   1. The mixin should take two parameters, $shape and $color.
   2. The mixin should check for the value of $shape using @if rule and extend, using @extend, the corresponding placeholder (e.g. %square) provided in the starter files.
   3. After extending each shape, override each property using the default color (black) with $color (e.g. background-color: $color;)
2. Create all of the shape-color classes
   1. Use the @each rule with the provided $shapes and $colors lists. You will need to use nested @each rules.
   2. Inside the inner @each rule, create the all of the shape-color class selectors (i.e. .square-red, .square-blue) using the interpolation syntax (#{$shape})
   3. Inside the selector, call the shape mixin passing a shape and color to the mixin

Example

The screenshot below shows what the completed version should look like.

Rubric

Task	Points
Creates a shape mixin with two parameters	5
Checks for a 'square' shape	5
Extends and override the %square placeholder	5
Checks for a 'circle' shape	5
Extends and override the %circle placeholder	5
Checks for a 'pentagon' shape	5
Extends and override the %pentagon placeholder	5
Creates nested @each rules using the $colors and $shapes lists	5
Generates the shape-color class selectors using the interpolation syntax	5
Calls the shape mixin passing the value for the $shape and $color	5
Total	50

Submission

Submit the style.scss file to the Sassy Shapes assignment on BrightSpace.