Goal: Focus on using Sass to make your styles as DRY and efficient as possible. Periodically review your styles to determine whether they can be further refactored with Sass functionality.

Warm Up

---

• Why do we compile Sass code if we don't compile plain CSS?
• Generally speaking, what's a CSS preprocessor? What does it do? Why?
• Why would we nest styles in Sass. What benefit does this offer? Can you give an example use case for nested styles?

Code

---

Sass Refactor

First, revisit two projects you or your partner created in class this week (your choice) and refactor their styles to use Sass. Don't move on until there are no remaining CSS rules that can be refactored to use the Sass concepts we've covered so far.

Then compare your new Sass stylesheet to the old CSS version. Is it shorter? More readable? Easier to navigate? Discuss differences, pros, and cons with your partner.

Awwwards Clone

Then, begin cloning this page from the Awwwards site, making sure to use as much Sass functionality as possible. Notice also how well it moves as the viewport is resized. This could be rebuilt with flexbox. (hint, hint).

Again, don't worry about copying content. Focus recreating the site's on general structure and movement, and keeping styles DRY with Sass.

Awwward-Winning Clone

If you're able to complete projects above with time to spare, clone one of the award-winning sites featured on the Awwwards site above. Take care to select a site that's responsive, interesting to you, and will provide just the right amount of challenge for you and your partner.

As you're working with your partner, also consider and discuss why your selected user interface is award-winning. Is it highly-usable, yet still artistic? Is it responsive in a really unique way? What makes it special, and why? Beginning to consider the difference between good and great user interfaces will assist us next week, when we begin designing our own from scratch!

Recreate both its movement and structure with media queries, flexboxes, Sass, and other CSS concepts covered thus far.

Peer Code Review

---

• CSS rules are created and organized using "outside in" best practices.
• Project exhibits understanding of box model best practices.
• Flexbox is used to efficiently present groupings of similar or related elements.
• Media queries are used to change rules based on screen size.
• Styles are written in Sass and well-refactored using Sass functionality.
• Project demonstrates an understanding of this week's concepts. If prompted, you can discuss your code with an instructor using the correct terminology.