This is a basic responsive frontend highlighting some of the key aspects of the CSS preprocessor SASS.

Based on the tutorial by DesignCourse

In ./css/main.scss you will find the main code for the project.

1. Variables

   //Creation
   $padding: 15px;
   $borders: 15px;
   
   //Use
   padding: $padding;

2. Grouped Variables (objects)

   $colors: (
     primary: #005dff,
     primary-light: lighten(#005dff, 40%),
     primary-dark: darken(#005dff, 40%),
     accent: #fff6bb
   );

3. Functions
   Create Function

   //function below is cleaning up object variable call
   
   @function color($color-name) {
     // way to call key:value pairs from sass objects
     @return map-get($colors, $color-name);
   }

   
   Use Function
   

   background-color: color(primary);

4. Mixins
   Creat Mixin

   //below is used to make basic @media query formate
   
   @mixin desktop {
     @media (min-width: #{$desktop}) {
       @content;
     }
   }

   
   Use Mixin
   

   @include desktop {
     display: grid;
     grid-template-columns: 50% auto;
     grid-template-areas: "primary card";
   }

5. Nested Structure
   It is possible to use nested structures in SASS to mimic the HTML structure. This helps with organization.

   ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
   
     li {
       margin-bottom: 10px;
   
       span {
         position: absolute;
         width: 30px;
         height: 30px;
         background-color: color(primary-light);
         border-radius: 50%;
         margin-right: 10px;
       }
   
       strong {
         display: inline-block;
         margin-left: max(40px);
         margin-top: 10px;
       }
     }
   }

6. Math
   You can do math in SASS.

   //Use Case
   
   padding: $padding * 4;