Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single price component with SASS

Riley 260

@rileydevdzn

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey everyone,

Tried out using SASS on this build. And more fun with mix-blend-mode 😊

What is the best practice for SCSS files on GitHub? If HTML file can only read the CSS file (not SCSS directly) it’s obviously needed, but it felt odd including the compiled CSS in the repo since it’s not really the “source” code. What’s the best way to handle this, to make sure changes flow through properly for source code?

Any feedback or suggestions appreciated!

Thanks!

Community feedback

@BrtSkr

Posted

I have taken a look at your code, I can see that you probably use the vscode extension SASS/SCSS compiler. What I would call the best or at least one of the best ways would be to use a bundler. There is many bundlers like Parcel.js, Webpack and vite (I personally used all of them and I'll say that vite is the best since it's the fastest of all of them). Using a bundler will be great in the long run since I guess you will later try to learn JS etc., it will help you especially when you are creating components, exporting/importing stuff etc. If you want to use vite jump on this site: Vite or just paste this into terminal: npm create vite@latest After that all you have to do is enter prompts paste this into terminal npm run dev and have fun! (Oh forgotten to add more information to this, when using a bundler you don't have to worry about importing/linking already compiled SASS code. Just link your stylesheet like always but instead of linking it with .css use .scss directly in html (In case you don't import styles in js code))

Marked as helpful

0

Riley 260

@rileydevdzn

Posted

Hi Bartosz!

Yes, I started with the VS code extension for SASS/SCSS compiler. I've seen a lot of references to bundlers (mostly Webpack, but I've been seeing more mentions of Vite lately) and I think a bundler will be my next step. :)

I'll start with Vite, per your suggestion. Thank you for the references and explanation, this was very helpful!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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