Categories
CSS

SASS Mixin Exercise 2023

For this exercise, please watch all the Loom videos at the following locations. Code along with the examples, or you will not remember anything from the videos.

There is a lot of content in these videos, so it would be best to watch (and code along with) them over a range of days. You will not be able to get through all of them in one sitting.

Once you have gone through the examples, your assignment is to make an HTML page on any topic you want. Lorem ipsum content is fine, as is picsum.photos content.

The page must be styled with SASS using the following:

  • variables
  • nesting
  • at least one really useful mixin, inside a mixins partial.

For your variables, choose meaningful and consistent names.

If the bolding doesn’t already make this clear, the purpose of the assignment is for you to demonstrate that you can make a mixin that you would actually use.

Don’t just reuse one of the mixins in the SASS videos.

Your mixin must have take in at least one argument.

The purpose of the page is to demonstrate the use of the mixin, but style the page so that it looks good as well (and is fully responsive, of course).

In CSS comments above the mixin (in the mixin partial/component), please explain how it works, and why it’s useful. Your mark will be partly based on the usefulness of the mixin, as well as the overall design of the page.

In the footer of the page, please include your name and indicate whether you are a designer or a developer.

Before handing it in, name your project folder firstname-lastname-sass-mixins, then zip it.