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

Social media dashboard with theme switcher with SCSS

#sass/scss
Nhan Pham 620

@NhanPhamTrong

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first time using SCSS. I have some questions:

  1. Is my organization in .scss files fine? If not, what can I do to improve.
  2. I cannot use background-image: url("images/....svg"). I have to upload them to get links. I don't know why it doesn't work.

Any suggestions are welcome. Thank you!

Community feedback

@oliverids

Posted

I think your scss organization looks just fine, but I think you could join the _color.scss and the _variables.scss into the same file. Though it isn't necessary, it's fine the way it is.

Your background-image property does not work because you aren't correctly accessing them. Sass compiler is literally just a compiler, it's not the final file. When you want to use an image as a background, you have to remember that you need to access them while you're inside the CSS FOLDER, because that's where the SASS files are being compiled into. Since your images are in a folder OUTSIDE of the css folder, you need to "go back" in the adress, and you do that by adding a "./" to it.

Your images can be accessed by: background-image: "./images/ ...".

Marked as helpful

0

Nhan Pham 620

@NhanPhamTrong

Posted

@oliverids Hello! I separate _colors.scss and _variables.scss because initially, I thought this project may have lots of types of variable, not only colors. That's why I split them. And thanks for your suggestion, I've solved my problem with background image. Thank you very much!

1

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