Order Summary

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

• Replace height:100vh with min-height:100vh to properly center the card.
• Use pointer cursor for user interactivity

 button:hover
   {
       cursor:pointer;
    }

I hope you find this helpful.

Happy coding😄

I feel you; I had trouble with Sass variables as well. Here is what I found out: Jessica from Coder Coder did a YouTube video "Sass and BEM for beginners." It's kinda long, but at time stamp (26:17) she discusses Css and Sass variables.

Your problem is most likely the 'namespace' requirement. You name your variable with $, then to use it you must reference 'namespace.$variable' Below is an example from one of my own projects (single-price-grid):

First, I named my variables in a partial:

$cyan: hsl(179, 62%, 43%); 
$yellow : hsl(71, 73%, 54%); 
$slate : hsl(218, 22%, 67%); 

Then, when I went to use them in another partial, I started with @use, then referenced the namespace 'var' as a prefix to the variable.

@use "variables" as var;
header {
    padding: 20px;
    * {
        margin-bottom: 30px;
    }
    h1 {
        color: var.$cyan;
    }
    h2 {
        color: var.$yellow;
    }
    p {
        color: var.$slate;
    }
}

Hope this helps! And keep on coding.