Social proof section with grid/flex layout SCSS and dark theme
Design comparison
Solution retrospective
Hi there!
In this challenge i tried to use SCSS to understand how it work, the page seems to work at the end, but i'm not sure if i used SCSS correctly, i mean, other than dividing the css in multiple folders (abstract, base and layout in my case), nesting some classes in scss way and use mixin instead of media is the same as a normal css file, maybe i'm skipping something or maybe scss helps more on complex pages?
A feedback on this topic will be really appreciated! Cheers!
Community feedback
- @Victor-NyagudiPosted about 2 years ago
First of all, great job on your solution.
The margin between the review stars' containers is a little bigger than the design, and the font size is a bit smaller but other than that, fantastic work.
As far as SCSS is concerned, you won't really see its power in such a simple solution as this one. In fact, it might even be overkill, but for learning purposes, it's fine that you used it.
You'll see the true power of SCSS when working on multiple-page websites.
For example, if you want to show two separate cards on a webpage based on the user's subscription status, you can use the
@ifstatement in SCSS to conditionally only apply the CSS you need. Removing unnecessary CSS can help improve page load speed. It's also just good practice not to include unnecessary code.In addition, you might find yourself repeating CSS for different pages that are similar but not exactly the same. Mixins help keep your CSS DRY by storing all the shared code in one place.
Finally, you mention that you used mixins instead of media queries. Those two serve different purposes.
A media query i.e.
@mediais used for breakpoints and only applies CSS based on the breakpoints you specified while a mixin i.e.@mixinstores shared CSS that can be used almost anywhere in the CSS.The organization SCSS provides is INCREDIBLY helpful in larger projects.
Hope all this helps.
All the best with your other solutions.
Marked as helpful0@VincenzoMuoloPosted about 2 years ago@Victor-Nyagudi I see, by the way i explained badly what i really wanted to say about @mixin, i used @mixin with @media to replace the pure css media queries i usually do. Thats more like i want to say about @mixin. Anyway thanks for your feedback i appreciate it!
0@Victor-NyagudiPosted about 2 years ago@Shirohige-96 Oh, okay. That makes more sense.
You're most welcome.
0
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