Sassify Surf and Paddle

[jacobthemyth]

Sassify Surf and Paddle

Description

Extract appropriate styles from Surf and Paddle into variables, nested rules, etc.

Objectives

Learning Objectives

After completing this assignment, you should...

• Understand when it is appropriate to use SCSS variables
• Understand when it is appropriate to use SCSS nesting
• Understand when it is appropriate to use SCSS mixins.

  Performance Objectives

After completing this assignment, you be able to effectively...

• Use the sass command line tool
• Watch a directory of SCSS files for changes

  Details

  Deliverables

• A repo containing at least:
  • main.js
  • index.html

    Requirements

• All global colors and sizes (e.g. the max-width of the content) should be extracted to variables.
• All state rules (e.g. :hover) should be extracted using SCSS nesting.

  Hard Mode

• The blue overlay feature should be extracted using a SCSS mixin.
• Your code should be organized into base, layout, and components.

  Notes

• You will probably need to install sass with sudo gem install sass
• The command to watch a directory of files for changes is: sh $ sass --watch <directory>

  Additional Resources

• Read Getting Started with Sass

[ATMartin]

https://github.com/ATMartin/TIY-HW-05-SurfSass.git

[ATMartin]

This hasn't had the media queries SASS-ified, which I would still like to do. But we've run into a cat emergency this evening so I'll have to get to refactoring the responsive queries later. Closing this now. Thanks!