All solutions

I wanted the transition between the mobile size and desktop size to happen gradually, then I used a lot of calc(), vw, vh and %. If there is an easier way, please tell me.

Is there something wrong with this mixin:

@mixin responsive($property, $size) {
   @media ($property: $size) {
      @content
   }
}

It worked as expected, but VsCode refuses to put the variable color on the $property in the second line, and github also let it unpainted.

This was my first time using Sass, any feedback to help me improve will be appreciated.

This is my very first time writing HTML & CSS totally by myself, so any feedback will be really appreciated.