I'm not sure what I'm doing wrong--I'm trying to generate a sprite sheet using Compass/Sass. I have a pretty common folder structure:
- www
+ config.rb
- img
- common
- team
+ team-member1.jpg
+ team-member2.jpg (etc)
- scss
- global
- _utilities.scss (etc)
My config.rb file lives in the root www directory. Here are the contents of that file:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
environment = :development
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
line_comments = false
color_output = false
preferred_syntax = :scss
And here's what I've typed in to generate the sprite sheet:
#import "compass/utilities/sprites";
#import "common/team/*.jpg";
#include all-team-sprites;
I have tried this a variety of ways. I've left out the compass/utilities/sprites import. I've changed the folder directory in the second #import statement. I've tried all of the following variations:
#import "../img/common/team/*.jpg";
#import "img/common/team/*.jpg";
#import "/common/team/*.jpg";
#import "common/team/*.jpg";
And nothing works. Here's the error I'm getting from Codekit:
Compass was unable to compile one or more files in the project:
error styles.scss (Line 47 of _utilities.scss: File to import not found or unreadable: common/team/*.jpg.
Load paths:
/Applications/AMPPS/www/mysite/www/scss
/Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets
/Applications/AMPPS/www/mysite/www/scss
Compass::SpriteImporter)
overwrite styles.css
Sprites only works with PNG because, unlike JPG, it is a lossless image compression format.
Indeed, a JPG image already compressed again lose quality as a result of a second compression to create the sprite map.
Related
I am having trouble compiling individual stylesheets using Compass. I am able to use compass compile to do all the files, and compass watch to monitor for changes. But when I try to assign a particular file to compass compile, I get get following error:
Individual stylesheets must be in the sass directory
My directory structure:
project root
- util
-- compass
--- config.rb
- www
-- css
--- [destination for .css files]
-- sass
--- [.scss files]
My config.rb:
project_type = :stand_alone
# Set this to the root of your project when deployed:
project_path = "../../"
http_path = "www" # The path to the project when running within the web server.
css_dir = "www/css" # relative to project_path
sass_dir = "www/sass" # relative to project_path
images_dir = "www/images" # relative to project_path
javascripts_dir = "www/js" # relative to project_path
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# generate sourcemaps
sourcemap = true
The following work fine when run from the /util/compass folder:
compass compile
compass watch
These do not work:
compass compile builder.scss
compass compile ../../www/sass/builder.scss
compass compile www/sass/builder.scss
and cause the error which presumably means the scss file cannot be found.
What am I doing wrong?
This is not a perfect solution, but at least gets you going. Probably this is caused by some bug in compass which leads to invalid sass_path. So set the sass_path manually like this:
project_type = :stand_alone
# Set this to the root of your project when deployed:
project_path = "../../"
http_path = "www" # The path to the project when running within the web server.
css_dir = "www/css" # relative to project_path
sass_dir = "www/sass" # relative to project_path
sass_path = File.expand_path(File.join(project_path, sass_dir))
images_dir = "www/images" # relative to project_path
javascripts_dir = "www/js" # relative to project_path
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# generate sourcemaps
sourcemap = true
And then you should be able to build individual sass files by using command compass compile ../../www/sass/builder.scss
I'm new to SASS and CodeKit and am trying to compile a SASS file. The project is a Drupal Omega 4 subtheme. I'm running Mac OSX 10.10 with all the Ruby Gems installed and I'm trying to figure out where the hangup is that's not letting CodeKit compile the file. Any ideas would be much appreciated This is the error I get:
ArgumentError on line ["55"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb: couldn't find HOME environment -- expanding `~'
Run with --trace to see the full backtrace
This is the config.rb file
require 'compass/import-once/activate'
# Require any additional compass plugins here.
require '~/.rbenv/versions/2.1.3/lib/ruby/gems/2.1.0/gems/'
# require '~/Library/Ruby/Gems/2.0.0/gems/'
# Set this to the root of your project when deployed:
http_path = ""
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
# 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
color_output = false
This is the SCSS file I'm trying to compile
// Import external libraries.
#import "compass";
#import "breakpoint";
#import "singularitygs";
#import "toolkit";
// Import variables, abstractions, base styles and components using globbing.
//
// Globbing will always import files alphabetically. Optimally, all your
// components should be self-contained and explicit enough to not have any
// contained styles leak into unrelated components: The import order should not
// affect the result.
//
// If there are variables, functions or mixins that depend on each other and
// therefore need to be imported in a specific order you can import them
// directly. Variables-, function- or mixin providing partials should never
// output any styles themselves: Importing them multiple times to resolve
// dependencies shouldn't be a problem.
#import "variables/**/*";
#import "abstractions/**/*";
#import "base/**/*";
#import "components/**/*";
Try set the HOME environment variable in your config.rb file.
ENV['HOME'] = "/Users/YOUR_OS_USER_NAME"
I have the following folder /app/components/calendar. My config.rb file here is:
# Assets directory
sass_dir = "/assets/sass"
css_dir = "/assets/css"
# fonts_dir = "/assets/fonts"
# Javascript files
javascripts_dir = "/assets/scripts"
# Image directory
# images_dir = "/assets/images"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
The app.scss inside the relative path /assets/sass needs to import a file located at /app/assets/.
I don't know how to use an absolute path. At the moment, I am including the file using #import "../../../app/assets/_common.scss" (the number of ../ is not necessary correct. It is an example).
How can I import my files easier?
If you're using grunt-contrib-compass, you can add import paths with the importPath configuration option.
I have a folder hierarchy like this...
- html
- clients
- client1
- css
- preprocess
- images
-img
- client2
- css
- preprocess
- images
-img
My config.rb file at the moment is set up with these settings...
project_path = '/'
css_dir = 'css'
sass_dir = 'css'
images_dir = './clients/client1/challenge/img'
sprite_load_path = './clients/client1/challenge/preprocess/images'
relative_assets = true
What I am needing is a way to get images_dir and sprite_load_path to be relative to the ./clients/client1/css/*.scss file, not the root of the web directory. Is there a command using something like __FILE__ that can be prepended to these paths that points to the file being saved. I know that __FILE__ refers to the config.rb file so that's not going to work. What I need is something like this like this...
images_dir = <path to file being saved> + '/../img'
sprite_load_path = <path to file being saved> + '/../preprocess/images'
We need each client to be sandboxed like this because they are removed over time and each one can be unique from one another so changing folder hierarchy isn't an option.
I'm trying to disable line comments in my compass config.rb file but I still keep getting the line references to the scss file in my normal css file.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# 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
I've restarted compass. Deleted my cache folder and my css file after saving my .scss. What am I doing wrong here?
My config.rb file was being ignored. Fixed it by going into the folder with commandline and typing compass watch from within the folder.
Still puzzles my because I have other projects in my WAMP folder and I just use compass watch [project] for those and the config.rb file for those does not get ignored.
Even with output style "compressed", I have not been able to remove multi-line comments, and the sass/scss documentation also suggests that they are not removed (only single-line comments with "//" are removed).
My solution was to simply apply a Perl one-liner to manually remove comments from a .css file, after sass has generated its final output:
sass -fCE utf-8 -t compressed application.sass application.css
perl -pi -e'BEGIN{$/=undef}s#/\*.*?\*/##gs' application.css
This worked for me
compass_config do |config|
config.sass_options = { :line_comments => false }
end