I'm currently working with Middleman to build up a new page, but now the image-url helper doesn't seem to be working.
In my config.rb I have:
#Use relative URLs
activate :relative_assets
set :css_dir, 'stylesheets'
set :js_dir, 'javascripts'
set :images_dir, 'images'
In my applications.css.sass I have this:
body
background: image_url("background.png")
The background image is in images/background but Middleman doesn't find/load that image. It just puts this out:
body {
background: url("../images/background.png");
}
Does anyone know what I'm doing wrong?
#Use relative URLs
activate :relative_assets
I believe this is within the "build" configurations so it won't have any effect on your working file that you are viewing in middleman local server.
for me using this works "/images/hp/wmn.png"
I guess you just need to figure out the write path to your asset, as a temporary solution you can use an absolute link starting with your local server address
//0.0.0.0:4567/ for mac or
//localhost:4567/ for windows
body {
background: url("/images/background.png");
}
Related
Im using Grunt SASS
https://github.com/sindresorhus/grunt-sass
Is it possible to convert my image paths to be absolute? So if I write this:
.something {
background: url(../icon.png);
}
I would like the compiled CSS to be:
.something {
background: url(www.mysite.com/images/icon.png);
}
This can be done with grunt css url replace:
https://www.npmjs.com/package/grunt-css-url-replace
However this isnt ideal. Running an additional task will be slower and I expect this will mess up my source maps. An add on / config setting for grunt sass would be better but I cant seem to find one.
I'm using Gulp as my build system.
I need to identify links pointing to external websites with the scss following rule:
// Links to external websites
a[href*='//']:not([href*='example.com']) {
&::after {
content: ' \e895';
font-family: 'Material Icons';
}
}
OR
$baseURL: 'localhost:3000'; // Set this variable based on environment
a[href*='//']:not([href*='#{$baseurl}']) {
...
}
When I'm running a development server the address I'm serving files from is localhost:3000, not example.com. The result is that every single link on the website (on the dev server) has a small icon indicating the link goes to an external website, which is really distracting.
What's the best way to set a scss variable based on an environment setting?
Edit:
This solution works, but it introduces a temporary file, which I'm not wild about. I moved my _variables.scss into the scss root, I process this file and output it into the base subdirectory where it is used to compile the scss. I would then add scss/base/_variables.scss to my .gitignore to avoid committing to version control.
_variables.scss
$baseURL: '/* #echo PATH */';
Gulpfile.js
// Set baseurl as Sass variable -- used to identify external links
gulp.task('sass-vars', function () {
var baseURL = (config.production) ? 'example.com' : 'localhost:3000';
return gulp.src('./scss/_variables.scss')
.pipe($.preprocess({context: {PATH: baseURL}}))
.pipe(gulp.dest('./scss/base'));
});
Yes, it is possible to do that.
To get environment variables there's a package: gulp-env
To remove these links from static files: gulp-preprocess
But it's also important to check these changed files, not to commit them as a development version. Hooks to your VCS is an option.
I am trying to follow this tutorial:
http://net.tutsplus.com/tutorials/ruby/singing-with-sinatra/
Got stuck in "We’ll also make use of a “view file”, which allows us to split the markup for a view into a separate file. "
I have my basics.rb file running fine.
And My files are stored as follows:
Desktop/RubyForm/basics.rb
Desktop/RubyForm/view/form.erb
However, now when i go to http://localhost:9393/form , I am greeted with:
Errno::EIO at /form
Input/output error - <STDERR> file: lint.rb location: write line: 398
sinatra.error
Errno::ENOENT: No such file or directory -
/Users/HelenasMac/Desktop/views/form.erb
UPDATE! : Got the form to work right after running ruby basics.rb and going to http://localhost:4567/form .
However, after I run "shotgun basics.rb" , I have to go to
http://localhost:9393/form, and that's when the form doesn't show up.
What am I doing wrong? Disclaimer: mega beginner to ruby and using the terminal.
Thanks in advance!
If you cannot get shotgun to work then the new recommended way to reload Sinatra seems to be rerun.
To use it:
> gem install rerun
> cd /Users/HelenasMac/Desktop/RubyForm
> rerun ruby basics.rb
Explicity Set a Views Directory
Unless you're using inline template for your views with enable :inline_templates, you may need to explicitly define a template directory if the default values aren't working for you. The docs describe how to set your views directory as follows:
:views - view template directory
A string specifying the directory where view templates are located. By default, this is assumed to be a directory named “views” within the application’s root directory (see the :root setting). The best way to specify an alternative directory name within the root of the application is to use a deferred value that references the :root setting:
set :views, Proc.new { File.join(root, "templates") }
You may also need to explicitly set :root, and make sure that both :root and :views make sense from your current working directory.
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.