Develop SASS locally, upload changes

Question

I am a third-party developer moving from CSS to SASS. I have Ruby and Compass installed on my local machine, and Compass "watch" works just fine.

However, I still get local CSS files that I have to manually upload via FTP to the server after every tiny change to find out what has been done. I would like to automate this.

I found this thread that suggested using rsync, but I am using Windows and I feel that setting up rsync will be very difficult.

Is there a way to automate this with Ruby? The workflow I'm trying to get is:

• I save the SCSS file in VIM.
• Compass Watch detects a change and compiles a new CSS file
• Some magic tools detect CSS file changes, upload to my server
• I switch to Chrome, press F5 and see the change

I can do everything except step 3. Any ideas? (What is not related to software for Linux or Mac?)

Answer 1

Since the question was asked in 2011, Compass has evolved and now provides callback functions to accomplish exactly what was asked in the question:

For step 3, you can use the on_stylesheet_saved and on_sourcemap_saved functions to upload * .css and * .css.map files to the production server.

An example of code on how to do this can be found in this https://stackoverflow.com/a/167189/

Answer 2

I disagree with Roy and Adam. When working with Wordpress themes, I develop on a remote developer server. I have a team of people adding content and other changes that update the database, it will be difficult for me, since the developer will work locally in 100% of cases. Their sql file, updated with the content, will not depend much on the fact with my sql file (you know the settings for the theme parameters and what is not).

I have so far avoided using SASS for this reason.

My optimal workflow would be to edit my scss file -> auto compile to css -> automatically upload to search (for example, upload while saving) -> the current upload happens and I see the changes (I can live without this last step).

I have not tried to do this yet, but found this link, which seems to be the closest answer. Using SASS with Remote Installation

Side note. Work locally is not always optimal. This is not an answer, and this is about the 8th time I saw this question with similar answers.

UPDATE: Just tried it without Codekit, just sass --watch, and it works great!

OTHER UPDATE: I also changed the way sass is handled and remote development. I know what to use Sublime, Open my.scss and .css file at the same time. Then I use SFTP (package for exalted) in the “Monitor File”, which will look for changes in the file outside of direct editing, then open the terminal and sass my scss file, now every time I save it, it runs locally and then compiled The css file is automatically uploaded to my server! Hope this makes sense, maybe I'll do a video show.

Answer 3

I take a similar stance developing in sass (scss) and browsing on a remote website. When developing on Windows, I use Sublime Text 2 for editing using the FTP-Sync module to automatically load while saving.

This plugin has a convenient option for marking folders viewed for saving files that run it, to check a different path for further changes to the file to be downloaded. Thus, you can mark your scss folder, make changes to the scss file and save, which warns ST2 about viewing the css folder (you can create a delay to give enough time for compilation) and upload any modified files.

After setting up the software and setting up FTP Sync for this project, your actions are 1) edit and save, 2) wait a couple of seconds, 3) update the browser to view the changes. (If the site looks broken at this point, you may need to increase the delay setting by a second and save the file again to trigger the process at another time.)

I'm not sure how to do this on other platforms for a remote site, although I am wondering if Coda 2 has some options that might work for Mac OS users.

Answer 4

In my experience, the best way is to work as follows:

1. Do you have a site somewhere - and it doesn’t really matter where or how complicated this site is;
2. You have local SASS and CSS files created from these SASS files.
3. Install Fiddler2 (Web Proxy)
4. Configure it to catch the request for the CSS file and replace the response with your local CSS file.

So, as you can see, you can use the local CSS file instead of the remote one. Therefore, there is no need to load CSS every time you create SASS.

Answer 5

Automatically load CSS after building Sass .

• Installation: gem install net-ssh gem install net-sftp

• Add to config.rb:

`

 require 'net/ssh' require 'net/sftp' http_path = "/" css_dir = "/" sass_dir = "/sass" images_dir = "images" javascripts_dir = "js" output_style = :expanded environment = :development remote_theme_dir_absolute = '/path/to/where/you/want/to/save/the/file/on/remote/server' sftp_host = 'your-host.com' # Can be an IP sftp_user = 'your-user.com' # SFTP Username sftp_pass = 'xxxxxxxxxxx' # SFTP Password on_stylesheet_saved do |filename| Net::SFTP.start( sftp_host, sftp_user , :password => sftp_pass) do |sftp| puts sftp.upload! '/path/to/local/style.css', remote_theme_dir_absolute + '/' + 'style.css' end puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" end 

`

For ftp only:

 require 'net/ftp' http_path = "/" css_dir = ".." sass_dir = ".." images_dir = "images" javascripts_dir = "js" project_type = :stand_alone output_style = :compressed line_comments = false environment = :development ftp_host = 'your-host.com' # Can be an IP ftp_user = 'your-user' # FTP Username ftp_pass = 'xxxxxxxxx' # FTP Password TXT_FILE_OBJECT = File.new('/path/to/local/style.css') on_stylesheet_saved do |filename| Net::FTP.open( ftp_host, ftp_user , ftp_pass) do |ftp| ftp.putbinaryfile(TXT_FILE_OBJECT, "/path/on/remote/server/#{File.basename(TXT_FILE_OBJECT)}") end puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" end 

Change the paths and file paths to your ...

Answer 6

The simplest solution could be local development (as best practice). Launch the web server on your computer (try XAMP for Windows) and all changes will be instantly visible, without having to download. Download only after completion.