Sass compiler for FTP files


#1

Hi there,

I am wanting to install a sass-compiler package but the files I’m editing are on my server (accessing via SFTP connection - ‘Remote-FTP’). Is there an sass/scss compiler plugin out there that will automatically write to the css file on my server rather than in my local working folder?

I’m only using Atom to access/update my live sites!

Thanks a lot in advance :smile:


Remote Sass
#2

Maybe not a direct answer to your question but Gulp could do this also.
gulp-sftp and gulp-scss would be great to just compile to a css file and then use gulp-sftp to upload only the .css file to your server.


#3

Okay thanks. It’s becoming more obvious that editing files on the server is a bit of a rash workflow.

Can someone share their workflow from a developer perspective - how they go about building/modifying sites (keeping in mind scss compilation) in terms of the tools they use?


#4

I rarely edit on the server (it’s mostly a bad idea because you have no version control).

I created a boilerplate which suits my needs, and I always start from this.
It mainly consists of gulp & scss but does everything you need for your workflow and I think it would be great for your situation.

Just edit like you normally would and gulp will concatenate & minify it to a css file.
Once you finished just use gulp build to create a build version and gulp push to push it to your server over sftp.

https://github.com/thibmaek/Thane

Hit me up with questions if you’re new to this or don’t understand something :wink:


#5

OK great.

What I currently do is set up a subdomain off the backbone of my business site which is a test/build environment I guess for my clients, so I wouldn’t be editing the live one.

I’m really interested in your boilerplate solution. Sorry to be a dummy, but would you mind explaining how I use it in conjunction with Atom?

Thanks a lot thibmaek!


#6

Well it’s really independant of any code editor. The code does the magic.

You need npm, gulp & bower before starting off.
Once you have that you basically just open the folder in Terminal and double click Gulp.command file which installs everything for you and runs gulp watch.

Once gulp watch is active you can edit the code or scss like you normally would and then it get’s compiled to a css file and edits are directly visible in the browser.

Once your project is done you just run gulp build from terminal which creates a build-dist folder for you, that’s the folder you’ll use for production. You can then upload that folder to your (S)FTP or use gulp push to directly push it to your server (be sure to configure the variables at the top though to your server credentials).

If you’re unfamiliar with gulp, this is a great tutorial.

For other questions please take a look at the Readme or the wiki in the github repo (or mail me, you’ll find my email at my github page: https://github.com/thibmaek)