can I convert css to scss and scss to css parallelly?

Question

I am planing to use sass/compass in a big project. is it possible that some team members can use simple css while others can still write scss?

what i exactly wants to know is the way compass/sass listen to scss and convert css the same moment can it also listen css file and convert back any changes in scss file ?

Solution 1

I'd say no — or at least, not easily. SCSS is fully compatible with regular CSS, and it does compile to CSS, but not the other way around, so the source file should be either CSS or SCSS.

Still, it depends on your project. Say two members are working on two completely separate parts of the projects. They can use separate files, and choose to work in either SCSS or CSS. Their files may then be included in a main SCSS file or otherwise be merged together with a build script — or be kept separate in production, even. That wouldn't be any problem.

Still, I'd always prefer all the team members to work in a similar way, so that they can easilly cover each other when there's a problem.

Solution 2

It is possible, but not ideal. Your best bet is to crack open your terminal and run

sass-convert --from css --to scss

in the directory where your styles are located and then refactor from there. It's a pain, and not a true "conversion". It tries to nest properly, and usually gets it right, but if you're not refactoring the code and using things like mix-ins, extends, and variables, it kind of defeats the purpose of using SASS to begin with.

To automate this, you may want to use something like Guard to watch the css files for changes. You'll want to make sure you're not also watching your main style (the one that sass is compiling to), as this will put you in a never-ending loop of conversion!

Solution 3

Use a command for installing compass

gem install compass

Run this command. This will scan defined directory for css files and convert them to scss files.

sass-convert -R my_css_dir --from css --to scss

Then execute this command

compass watch

This will watch scss files for changes and convert them to css files automatically.

Solution 4

You can check out the following website that provide this kind of service:

https://css2sass.herokuapp.com

 ______________| CSS | SASS | SCSS |
| CSS          |  -  |   X  |   X  |
| Minified CSS |  X  |   X  |   X  |
| SASS         |  X  |   -  |   X  |
| SCSS         |  X  |   X  |   -  |

Solution 5

I wrote a tool for this :) http://sebastianpontow.de/css2compass

But this really is just a tool to get you started, you should always check the output and rewrite critical parts of it - the output might not be the best way to write the scss-code

View more solutions

Comments

[program247365]

This is exactly what I needed. The 'sass-convert' comes along when you 'gem install compass'. Quickest way to do this locally.

[program247365]

If you're taking an all CSS project, and starting to use SCSS (SASS) files, then @FDisk's answer below is the way to get all the CSS files into SCSS files quickly: stackoverflow.com/a/13759406/5716

[leymannx]

Didn't work for me since it seems to last hours and when I ctrl+C it says I interrupted. For me only @FDisk's answer with a specified directory worked.

[Mikey]

why wouldn't you just do sass --watch?

[FDisk]

@Mikey sass is not a compass

[kamilkp]

Do you use sass-convert underneath? Can this be achived by running some command in terminal? I need to extract variables from css the way you do on your site; tried sass-convert but no luck with that.

[pontoffeltier]

No, sry. I wrote a script to parse the css. Never tried the command-line sass-tools...

[lzl124631x]

@pontoffeltier Is there a tool that can help you transform you css code into sass/compass code?

[pontoffeltier]

thats exactly what my tool does :)

[nirmal]

@pontoffeltier great tool