@CyrusKabir
Posted
Hello my dear friend ♥ you did very good on this challenge and I think it's perfect pixel no almost and UI it's good and I just want say some sassy things 😁
- it's good to use
@mixinswhen there is some arguments, I notice that you usedslideInFromLeftanimationfor just defining animation configs for different elements but you can usePlaceHoldersin sass and just for changing animation delay you can add them in their classes, also you can check this article if you want 8 sass tips - you can name your media queries for more readability with sass, I mean using just some numbers with relative units it's not descriptive, you can check this articles for more information about naming @media in sass @media in sass, naming @media
Marked as helpful
@GrzywN
Posted
@CyrusKabir Thank you a lot for sassy tips!
I will definitely use placeholders more in my future projects. They are the great way to avoid bloating CSS with the same code. I improved my solution based on your recommendations and added something extra:
- I replaced mixin
slideInFromLeftanimationwith a placeholder - I removed animation-delay mixin entirely and changed it to regular CSS code.
- I created breakpoint variables and media query mixins. Based on that I changed how this SCSS was structured. (I removed media queries in the end entirely)
And something extra:
- I replaced primary color variables with a map and created all classes for each color of the card using
@eachloop.
I probably should also change the structure of sass files, but I think it's not really worth it in a small project like this one. Also, about breakpoints and media queries - I'm currently using this file in my other project. I don't know if you've seen it, but it's amazing.
Thanks again for everything! Have a nice day and happy coding ! :)
@CyrusKabir
Posted
@GrzywN your welcome, I am very glad it was helpful ☻ edit: @each and sass maps are awesome !
