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

[bhoskins]

https://github.com/bhoskins/surf-and-paddle-exercise.git

[bhoskins]

So sorry Jake, I sent the unsassified one first!!!

[bhoskins]

I ran out of brain fuel yesterday and crashed early. Got up this morning and got sass set up. A few variables declared and main.css running without error; but the variables are not working with the html yet. Obviously I'm missing a simple connection, will figure it out today.

[bhoskins]

https://github.com/bhoskins/sassify-surf-n-paddle.git