Skip to content
Submitted about 2 years ago

Responsive layout for stats preview card

bem, sass/scss, webpack, node
MiloosN5•190
@MiloosN5
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm intrested, since I've done this challenge with webpack, are @forward and @use valid? It didn't work for me, but @import does. In addition, any suggestion for better SASS organization will be helpful.

Code

Please log in to post a comment

Log in

Community feedback

  • Randall3475•360
    @Randall3475

    Hello, the @use and @forward methods - as of now - only work in Dart Sass, which is the version of Sass that includes all newer features.

    More on Dart Sass here: Sass: Dart Sass

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, MiloosN5! 👋

    I do not know about Webpack. But, Sass recommends using @use and @forward instead of @import.

    I wrote a blog post to help you write better Sass code. It contains five code snippets. They can help you write media queries, convert px to rem, and much more.

    5 Handy Sass Code Snippets — Vanza Setia

    Some suggestions:

    • Empty alternative text: Decorative image should have empty alternative text—alt="". If you write "..." (triple dots), the screen reader will still announce it.
    • Appropriate element: Use a list element for the statistic, <div class="stats__content__numbers">.

    If you want to get more feedback, I recommend using HTML and CSS. This way, more people can give you feedback.

    I hope this helps. Happy coding! 🙂

    Marked as helpful

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