# Sass Mixins

Create a private GitHub repo called mixin and set the main branch to be the github pages branch. Then clone the repo on to your local computer.

See the GitHub Setup Instructions for more help with creating the repo.

The point of this assignment is to create valid SCSS stylesheets which properly use mixins and partials. Begin by downloading the starter HTML and CSS files from the assignment Brightspace page and add them to your cloned repo.

1. In the scss folder, create a file named styles.scss. This Sass stylesheet will be used to compile the styles.css stylesheet and import Sass partials
2. Adjust your Sass settings to compile the CSS in a compressed format. Your compiled Sass should output as styles.min.css into the css folder
3. In the scss folder, create three partial stylesheets named _variables.scss, _mixins.scss, and _form.scss and import these three partials into styles.scss
4. In _variables.scss, declare six colour variables using rgba, two reds (one at 100% opacity and the other at 15% opacity), two greens (one at 100% opacity and the other at 15% opacity), and two blues (one at 100% opacity and the other at 15% opacity)
5. In _mixins.scss, create three mixins:

# Mixin 1

• This mixin will be used to declare margin and padding
• Use parameter variables for both the margin and padding values

# Mixin 2

• This mixin will be used to declare flexbox layouts
• declare the following styles:

display flex
flex direction [with parameter variable]
justify-content [with parameter variable]
align-items [with parameter variable]

# Mixin 3

• This mixin will be used to declare a transition on focus events
• declare the following styles:

transition on all with a duration of 300 milliseconds with a linear timing function
&:focus{
  background-color [with parameter variable]
  border 2px [parameter variable] solid }

6. Using ONLY CSS selectors and @include statements, use your mixins to style your form in _form.scss so that it looks similar to the example shown below. Be sure to use your color variables in _variables for the focus events.

As you make changes to the CSS, commit each change to your repo and push it up to GitHub. You will need to test the page through GitHub Pages on GitHub.io to see if your fixes worked.

# Submission

• On the Assignment page in BS LMS, submit both the github.io URL and the github.com URL.
• You will need to test the page through GitHub Pages on GitHub.io to see if your CSS works.
• Be sure to invite me to your repo via my Algonquin College Github account (garrarj), otherwise I will not be able to view and mark your repo.

Back to Assignment List