Your turn to Refactor for SASS

Refactoring your CSS to use the new SASSiness.

Scroll down...




It's time to put your new knowledge to work! In this assignment we'll take a previous project that you've completed and you'll refactor your CSS to use SASS.

Getting Started

  1. Choose a project that you've completed previously in this course
    • Make sure it is a project that has enough CSS to give you a challenge to refactor it to use SASS
  2. Create a new folder in the project to contain your SASS style sheets
  3. Designate a completely new destination folder in which your SASS will be compiled to CSS
    • This will allow you to keep your previous styles in the same project so you can properly migrate them to SASS
  4. Change the link tags in your HTML files to target the location of the compiled CSS instead of the original CSS files
  5. Get refactoring!

Tips and Guidance

  1. Review your CSS styles before you start, have a plan of attack and pin point any styles than can be made reusable with mixins or extending.
  2. Find all the colors in your CSS and create a _colors.scss file in which you set those colors to variables. Now include that file before all others via @import and change those hard coded colors to your new SASS variables!
  3. Take advantage of SASS features and operations where ever you can! Remember, it is there to make your life easier!

Finishing Up

  1. When you're finished with all tasks, push your changes up to your fork (aka $ git push origin master).
  2. Your assignment will already by submitted since you made a pull request before.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Wrapping up the Unit