Skip to content
Submitted over 1 year ago

Responsive page using CSS Grid With SASS

fidaatag•20
@fidaatag
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

When I built this using SAAS there is something I'm still confused about using @import and @use. The SASS documentation recommends using @use. However, I decided to use @import because it can be reviewed immediately.

Then,

Using @mixin for @font-face, I found an article about using @mixin for @font-face, but when I follow the code it doesn't run correctly, maybe I don't understand. For that I use a simple method, but for projects with lots of fonts, using @mixin for @font-face is more effective.

Community feedback

  • Elijah•320
    @taco-nekoPosted over 1 year ago

    @import in Sass is deprecated. It might work for now, but it will eventually stop working completely. You have @use and @forward now. They were confusing for me at first too. Here's a video that helped me understand them better.

    I also suggest you look into the 7-1 architecture, for keeping your files organised. This is the article about it. Note: the article is quite old so it still talks about using @import, but the same concept applies to @use and @forward. This is a boilerplate that you can reference for your folder setup. You don't have to do it exactly like this, for example if you have no need for a "pages" folder (if you are working on a single page site) you can omit it entirely. Same for the other folders. It helps a lot once your files have a lot of stuff in them.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord