10. Preprocessors and Tooling

Activity 10.01: Converting the Video Store Home Page into SCSS

Solution

1. Get a copy of your code from Chapter 6, Responsive Web Design and Media Queries, Activity 6.01, Refactoring the Video Store Product Cards into a Responsive Web Page, and save it as a new file within your Chapter10 project folder called Activity 10.01.html. Remove the CSS code from within the <style> tags and save it as activity1.scss within your SCSS subfolder in the project. Add a link to the activity1.css file in your document from the CSS subfolder of your project.

   Activity 10.01.html can be found in https://packt.live/36YzkXZ.

   activity1.scss code can be found in https://packt.live/32FW5fY.

2. Update the SCSS to use nesting and color variables, keeping the media queries within the relevant tags, instead of at the end of file. Here's the updated activity1.scss file:

   $primary-color: black;
   $secondary-color: white;
   $hover-color: red;
   $bg-color: lightgray;
   $saving...