Sassy Four-Card Feature Section

What are you most proud of, and what would you do differently next time?

I'm proud of being able to use SASS for the first time, and of how quickly this project came together.

And I'm proud of being able to justify my decisions, as outlined in the README. Here are some examples.

• Using SASS because I wanted to use text-preset classes, while also not relying on adding text-preset classes in the HTML - I wanted all the CSS rules to explicitly arise from the CSS file(s) - and SASS allows for adding rule sets to other selectors (via @extend).
• Choosing an alignment approach for the icons that didn't take them out of the page flow: hence I used flex, rather than absolute positioning or float.
• The icons were included in img tags, rather than as inline svg elements which is the approach I would have used if their colors needed to be controllable via CSS.

What challenges did you encounter, and how did you overcome them?

I had originally used a set of nth-child selectors to color the top border of each card. However, when I pivoted to using flexbox, the new approach involved wrapping the middle two cards in a container div, and that threw off the nth-child selectors. I tried for a while to find a work-around, but ended up changing my approach and using color-specific classes.

When I started using SASS for this project, I was initially confused about where the .sass file fits in to the workflow. I searched online for clues for a while, and eventually found "How to add SASS to your project", a blog post that helped me understand where SASS fits in, in a mechanical sense: what exactly it does and how I should use it.

What specific areas of your project would you like help with?

I'd love to hear any feedback you might have. In particular, do you have any suggestions for how I might improve my use of SASS? (Here's the link to my SASS file on GitHub.)