Menu icon Foundation
how to import a css project into a scss one

So i've been working on a project for a few weeks and have been using foundation with basic css. At this time, I would like to use what i've done so far and convert it to a scss project so I can have more customization for items like the top bar and such. I believe I have everything installed correctly and have created a new project with the foundation new command, and I ran a bundle and bundle exec compass watch. I copied over my css and index.html and as expected, everything is foobared. Is there a way to convert or to import a css project over to scss?

cssscssimport

So i've been working on a project for a few weeks and have been using foundation with basic css. At this time, I would like to use what i've done so far and convert it to a scss project so I can have more customization for items like the top bar and such. I believe I have everything installed correctly and have created a new project with the foundation new command, and I ran a bundle and bundle exec compass watch. I copied over my css and index.html and as expected, everything is foobared. Is there a way to convert or to import a css project over to scss?

Rafi Benkual about 5 years ago

I'm not sure what is not working without seeing it. Did you make changes in the foundation.css file in the css project?

If so, you will want to go find those changes and just copy the individual changes into your app.scss file. Every-time you compile, the app.css gets the compiles css results, so you want to separate your css changes in app.scss.

Example: https://www.notableapp.com/posts/9f6cdd178169ece63e1e82cbec9ac4c9dd4524ed

Ryan Hellerud about 5 years ago

Thanks Rafi, I understand that when you compile the changes are saved in the the *.css file but for some reason my changes now in the _settings.scss file dont seem to be working, for example. I change the setting for $topbar-bg-color but it only changes a portion of my top bar color not the entire top bar. Aslo if i uncomment the line below that in _settings nothing changes.

Also not sure if this is the way it supposed to work but when I try and put the $oil variable back into the bg color it gives me an error for variable not found. I thought those variables where already defined however I may be mistaken.