Meet Landing Page with Sass

Community feedback

• 

  P

  Michael•180

  @Networksentinel

  Posted about 1 month ago

  Hi Leonard!

  Your solution looks awesome, and the responsiveness is totally on point—really great job!

  I especially liked how you used @media queries inside your @mixins for text presets. It honestly never occurred to me that I could do that 😄.

  I went with a different approach and used clamp() for font sizing, so it adapts based on screen width. Something like this:

  $font-size-xl: clamp(2.5rem, 4.1666vw + 1rem, 4rem); // desktop: 64px, tablet: 48px, mobile: 40px
  

  I think my version works well for typography when only one or two properties need to adjust, but your method looks much more scalable—definitely something I’ll keep in mind for larger projects. So thanks for the inspiration!

  Also, your code is really well-organized and easy to read—nice job there too.

  Just two small suggestions I'd like to share:

  1. Modular SCSS – Right now, everything is in one big file. Even though your code is spaced out nicely, it can still be a bit much to scroll through. You’ve already used presets.scss, so you could break the rest down into partials like:

  • hero.scss
  • main-content.scss
  • footer.scss

  It’s a great way to separate concerns and make things more maintainable.

  2. SCSS Imports Tip – For smaller projects, you can import SCSS files like this: @use "presets" as *; That way, you don’t have to reference the file name every time and can just do something like: @include text-preset-4;

  Anyway, I hope some of this was helpful! And if not (since you posted this a month ago 😄), at least I learned something new from your code—so thanks again, and keep up the great work!

  10

  Marked as helpful