I don't know if I can explain the issue without pasting the whole code of all files but I'll try.
EDIT I've added the whole code to Github Account - My Sass structure
I use Windows 8.1 and Compass 0.12.6
In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes).
I run compass watching running watch.bat script that I have in public_html folder
Content of watch.bat is:
START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT
My config.rb file is:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
sass_dir = "stylesheets/sass"
images_dir = "img"
javascripts_dir = "js"
cache = false
relative_assets = true
add_import_path "stylesheets/sass"
if environment == :development
css_dir = "stylesheets/preview"
line_comments = true
output_style = :nested
end
if environment == :production
css_dir = "stylesheets"
line_comments = false
output_style = :compressed
end
In stylsheets/sass I have 4 files print.scss , medium.scss, small.scss and large.scss
Both medium.scss and large.scss begin with:
#import "base/_init";
This file import partial _init from base folder and this one loads another partials and other partials load another partials.
The problem is when I change something in partial Compass doesn't always compile all necessary output files. For example I've just changed something in _settings.scss partial and this one is finally loaded by medium.scss and large.scss (I remind that those 2 files have the same beginning so they both should be compiled). Somehow only medium.scss file is being in fact watched and large.scss file is not compiled as it should be in this case.
I have had such situation just before. I stoped 2 watchers (CTRL + C and Y) and then run again my watch.bat not changing anything in files - just after running I have info:
Change detected at 15:51:33 to: large.scss overwrite stylesheets/preview/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
and
Change detected at 15:51:33 to: large.scss overwrite stylesheets/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
So in fact there was change that should be watched but somehow compass/sass doesn't always catch it.
Sometimes neither of 2 watchers catch changes and I have to stop them and once again run watch.bat so it's not very convenient to work that way.
Sometimes even happen that watchers are stopped (as I presed CTRL +C + y) but I haven't pressed anything and in cmd there's no question about closing visible. They've just stopped
Question: What could be wrong and how to fix it?
I've cloned and checked your project structure, and your problem is simply the unnecessary use of the Import Once plugin. If you comment the first line of your config.rb (where this plugin is activated), your stylesheets will be compiled normally. Each main scss file you have (large.css, medium.css, small.css) is rendered to a separated css file, and you're not repeating your imports for each one of these files.
Below is the sequence of your imports with the Import Once plugin disabled:
I dont't know exactly how to solve your problem.
I think basically it's a bug or problem with two instances of compass running at the same time on the same folder.
But due to your environment, I have a suggestion that can do the trick for you.
Why, instead of having two folders with the assets, one for prod. and dev., you just keep one, for both dev. and prod.
What you can set on compass is to output css in the way you want for dev. and then pass that css through a yui filter (or whatever) for prod. This will minify all assets. If you are using symfony, you can use assetics, for instance.
That's the way we do and works perfect. We don't use assetics for compass... that's another topic :D
If you don't use any framework or extra filters, you can alway manually dump the assets when this ones are ready for production.
This way you avoid using two compass instances at the same time and also to compile manually for every deploy on production.
I really think it have to do with having two instances of compass running.
Related
I have my own Grunt/Compass/SASS project with a config.rb file that has these settings:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
add_import_path "./bower_components/slick-carousel/slick"
As you might guess, the problem here is the slick-carousel I am trying to compile together with my other sass-files. It works fine without that component. The slick-folder contains these files:
./ajax-loader.gif
./config.rb
./fonts
./fonts/slick.eot
./fonts/slick.svg
./fonts/slick.ttf
./fonts/slick.woff
./slick-theme.css
./slick-theme.scss
./slick.css
./slick.js
./slick.min.js
./slick.scss
When compiling the slick-theme.scss, I get warnings that it can not find the files which are referenced via relative urls.
WARNING: 'slick.woff' was not found (or cannot be read) in /project-root/fonts
Is there a way to tell the Compass/SASS compiler to use the "current" SASS file as base for the relative paths? So it would look in /project-root/bower_components/slick-carousel/slick/fonts instead?
Slick.js has it's own Sass variables for handling his fonts urls. So you have to properly assign the right path to that variable like this:
// Fonts
$slick-font-path: "./bower_components/slick-carousel/slick/fonts/";
You can check all slick's Sass variables here
I'm trying to create a basic Compass extension, following the docs here:
http://compass-style.org/help/tutorials/extensions/
The problem I'm seeing is that I can't import files from my extension as expected, because the stylesheets directory, which the docs say will be automatically added onto the load path, isn't being added to the load path.
It gives me a command line error saying it can't find the file I tried to import, then lists out the load paths, verifying that my path is not on there.
One of the load paths is indeed /Users/myname/Sites/sitename/myextension_name, but I would expect there to also be /Users/myname/Sites/sitename/myextension_name/stylesheets
Anyone know why this wouldn't be happening as indicated in the docs?
UPDATE
Here's my config.rb as requested:
add_import_path '../../myextension'
# Require any additional compass plugins here.
require "susy"
require "sass-media_query_combiner"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "../../js"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded #or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
Ad hoc extensions need to be placed within the extensions_dir directory (which is set to extensions by default).
/path/to/config.rb
/path/to/sass/
/path/to/stylesheets/
/path/to/extensions/ <- extensions go here
Your myextension_name extension should live in /path/to/extensions/myextension_name/ and then follow the rest of the conventions for creating an extension. You may be able to assign extensions_dir to be the same as your sass_dir or your project's root, but I'm not sure that would be a wise idea.
If your extension is meant to be reused with other projects, it might be better to bundle it as a gem instead and use it the same way you're using Susy.
I'm using Jekyll Asset Pipeline to build my website and I'd like to only compress the website (which takes about 20 seconds) when I'm publishing it. To do this I have to enable these values programmatically in the config file:
asset_pipeline:
bundle: false
compress: false
I've tried to code a plugin but it isn't working. Could someone help me as to why?
module Jekyll
module Commands
# I overwrite this here so we only do heavy work (like compressing HTML and stuff)
# when we are building the site, not when testing (which uses jekyll serve)
class << Build
alias_method :_process, :process
def process(options)
require 'jekyll-press'
options['asset_pipeline']['bundle'] = true
options['asset_pipeline']['compress'] = true
_process(options)
end
end
end
end
You don't even need a special gem - you can pass multiple configuration files to jekyll build:
First, the regular config file, with all the settings that are always needed, plus the values to disable compressing, since you don't always want it to run each time you're building locally:
_config.yml:
destination: _site
source: src
markdown: rdiscount
# ... and many more settings that are always needed
asset_pipeline:
bundle: false
compress: false
Then, you need a second config file for publishing which overrides only the values that you actually want to be different:
_config-publish.yml:
asset_pipeline:
bundle: true
compress: true
So when you're not publishing, you just run jekyll build like before.
But when you're publishing, you pass both config files in the right order:
jekyll build --config _config.yml,_config-publish.yml
Jekyll will apply them in the order you passed them, so the settings in the second file will overwrite the ones in the first file, and bundle and compress will be set to true in the end.
In case you can't control what parameters will be passed to jekyll build (maybe on GitHub Pages? I never used it, but maybe...) you can do the same thing, just the other way round:
Set bundle and compress to true in the default config file
Whenever you're not publishing, use a second _config-dev.yml file to set bundle and compress to false again
The gueard-jekyll-plus gem allows you to configure multiple configuration files where the later ones override the former ones. I have the same set up where I have a _development.yml file that turns off all the asset compilation settings for development work. Yes you have to set guard up, but it makes it simple to refresh the site. Here's the relevant section:
guard 'jekyll-plus', extensions: %w[slim yml scss js md html xml txt rb], serve: true, rack_config: 'config.ru', config: ['_config.yml', '_development.yml'] do
watch /.*/
ignore /^build/
end
I detail most of the basic setup in of the Gem in the article Integrate Jekyll with Slim, Zurb Foundation, Compass and an Asset Pipeline.
Couldn't you also just do:
> jekyll build --config _development.yml
To build with a different configuration file?
I'm a front-end developer transitioning from CSS to SASS. I've got Ruby and Compass installed on my local machine, and Compass "watch" is working beautifully.
However, I still end up with local CSS files which I have to manually FTP over to the server after every tiny change, to see what the change made. I would like to automate this.
I did find this thread which suggested using rsync, but I use Windows and I feel setting up rsync would be really difficult.
Is there some way to automate this using Ruby? The workflow I'm trying to get:
I save the SCSS file in VIM.
Compass Watch detects the change and compiles a new CSS file
Some magical tool detects the change to the CSS file, uploads to my server
I switch over to Chrome, hit F5, and see the change
I can do everything, except for step 3. Any ideas? (That don't involve Linux or Mac-only software?)
I disagree with Roy and Adam, When working with Wordpress themes, I develop on a remote dev server. I have a team of people adding content and other edits which update the database, it would be difficult for me as the developer to work locally 100% of the time. Their sql file getting updated with content wouldn't mesh super well after the fact with my sql file (you know theme option settings and what not).
I have avoided using SASS for this reason until now.
My optimal workflow would be to edit my scss file -> auto compile to css -> auto upload to the search (like a upload on save would) -> livereload takes place and I see edits (I can live without this last step).
I haven't attempted this yet but I found this link which seems to be the closest answer thus far.Using SASS with Remote Setup
Side note: Working locally is not always an optimal set up. It isn't an answer and this is about the 8th time I have seen this question with similar answers.
UPDATE: Just tried it without Codekit just sass --watch and it worked great!
ANOTHER UPDATE: I have further modified the way I handle sass and remote development.
I know use Sublime, Open my .scss and .css file at the same time. I then use SFTP (a package for sublime) to "Monitor File" which will look for changes to the file outside of directly editing it, I then open up terminal and sass my scss file, now every time I save it complies locally and then the compiled css file auto uploads to my server! Hope that makes sense, maybe I will make a video showing.
Since the question was asked in 2011 Compass has evolved and now provides callback functions to do exactly what was asked in the question:
For Step 3 you can use on_stylesheet_saved and on_sourcemap_saved callback functions to upload your *.css and *.css.map files to the production server.
Sample code how to do this can be found in this StackOverflow answer
I am in a similar position developing in sass (scss) and previewing on a remote dev site. When developing on Windows I use Sublime Text 2 to edit with the FTP-Sync plugin to automatically upload on save.
This plugin has a convenient option to flag folders watched for for file saves that trigger it to check a different path for further file changes to upload. So you can flag your scss folder, make changes to an scss file and save, which alerts ST2 to watch the css folder (you can build in a delay to allow enough time to compile) and upload any changed files.
After setup of the software and setup of FTP Sync for the given project, your actions amount to 1) edit and save, 2) wait a couple of seconds, 3) refresh browser to view 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 another time.)
I'm not sure how to accomplish this on other platforms for a remote site, though I wonder if Coda 2 has some options that might work for Mac OS users.
In my experience the best way is to work this way:
1. you have a site somewhere - and it doesn't really matters where and how complex this site is;
2. you have local SASS files and CSS generated from these SASS files;
3. install Fiddler2 (web proxy)
4. configure it to catch a request for CSS file and replace the response with your local CSS file.
So, as you can see, you can use local CSS file instead of remote one. So there is no need to upload CSS every time you're building the SASS.
Automatically Upload CSS After Sass is Compiled.
Install:
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 dirs and file paths to yours...
The simplest solution would be to develop locally (as is a best practice). Run a web server on your computer (try XAMP for Windows) and all changes will be instantly visible, without having to upload. Only upload when you're done.
I can't get the Rails 3.1 asset pipeline precompilation to work in production mode. It always fails on images referenced within SCSS with an error like:
$ bundle exec rake assets:precompile RAILS_ENV=production
rake aborted!
rails.png isn't precompiled
(in /home/florian/AssetTest/app/assets/stylesheets/application.css.scss)
But when I look in the public/assets directory, the image is there, so it is precompiled:
$ ls public/assets | grep rails
rails-dd352fc2630e5f9aa5685ef1d7fe5997.png
The SCSS file in this case just contains some test code:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
body {
background: #ffffff image-url('rails.png') no-repeat 0 center;
}
If I don't use the image-url helper in SCSS, but just url('/assets/rails.png'), precompilation works fine, and a manifest.yml file is generated in public/assets.
The interesting thing is: if I change the SCSS back to image-url('rails.png') and run another precompilation, it still works (I guess because the image is now already listed in the manifest file).
What am I doing wrong here? I don't really want to disregard the helper methods (as using them is The Way You Should Do It, right?), and I definitely don't want to create the manifest file manually...
I've run into the same problem myself. This is apparently a bug in Rails 3.1.0, and will hopefully be fixed in short order...
In any event, in production.rb, you can try this:
config.assets.compile = true
You likely have it set to false, which it should be. However, having it set to false causes issues when you use asset helpers in SCSS as you're trying to do. Setting that value to true seems to properly allow compilation while using those helpers.
Take a look at this issue on github for some details.