I'm on compass 0.12.2...I'm trying to use the the config reference http_images_path in the config.rb but it doesn't look like it is using this reference...it still resolves the image to my local directory...am I missing something?
Thanks for any help!!
Config.rb
http_path = "/"
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
#images_dir = "../resources/images"
http_images_path = "http://myurl/img/"
output_style = :expanded
environment = :development
css file:
#import "compass";
.dir
{
background: image-url("guide.jpg");
}
If you are on compass watch...you need to restart to have updated config.rb take effect.
Related
I want compass to compile 2 different .css files: 1 with
output_style = :nested
and one with
output_style = :compressed
So, filename_nested.css and filename_compressed.css, should be compiled.
I am just using a config.rb
config.rb: This seems to work. I wish i didnt have to spec the scss in Compass.compiler.compile('main.scss', 'main.min.css') I would rather use the 'file' variable, but I have yet to work out how. Also, I have yet to figure out how to get around this deprecated function. code found here
http_path = "/wp-content/themes/Harmony_child/css/"
css_dir = ""
sass_dir = ""
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"
cache_path = "C:/Temp/sasscache"
output_style = :nested
output_style = :compact
line_comments = true
color_output = false
require 'fileutils'
on_stylesheet_saved do |file|
if file.match('.min') == nil
require 'compass'
Compass.add_configuration(
{
:output_style => :compressed
},
'min' #ADDING A CONFIG REQUIRES A NAME
)
Compass.compiler.compile('main.scss', 'main.min.css')
#Compass.compiler is deprecated. Use Compass.sass_compiler instead.
#Compass.sass_compiler('main.scss', 'main.min.css')
#yabbut, it dont work. the deprecated one does...
end
end
I'm looking for a way to override the compass config.rb variables / constants by checking for a local file and including it.
Using this method (rather than the current option of defining the config file to use when calling compass) would mean we could have a set of defaults for all developers and build system and allow devs to override these if necessary for their own local setup.
Unfortunately I don't know Ruby at all and a simple check for a file and requiring it in config.rb doesn't seem to override the original settings. My current coding attempts are below. Please could someone explain to me what I'm doing wrong here?
config.rb
# Compass configuration file.
# Require any additional compass plugins here.
# Sass / Compass paths
http_path = "/"
css_dir = "../../web/stylesheets"
sass_dir = "sass"
images_dir = "../../web/images"
javascripts_dir = "javascript"
fonts_dir = "fonts"
# Output style environment can be forced on build using -e
output_style = (environment == :production) ? :compressed : :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# Disable the compass cache method - we use our own methods.
asset_cache_buster = :none
line_comments = false
color_output = false
preferred_syntax = :scss
# Define the location of a the compass / sass cache directory.
cache_path = "/tmp/compass-cache"
# Add shared sass path to make it easier to include assets.
add_import_path = "../shared/sass"
# TODO: Check for a local config file - use this to extend/override this config file.
$localConfig = File.join(File.dirname(__FILE__), "config.local.rb")
require $localConfig if File.exist?($localConfig) and File.file?($localConfig)
config.local.rb
# Additional custom Compass Configuration file.
# Require any additional compass plugins here.
line_comments = true
cache_path = "/Users/jwestbrook/Sites/compass-cache"
sass_options = {
:debug_info => true,
:sourcemap => true
}
enable_sourcemaps = true
So I'm no Ruby developer but the following should work...
The idea is we have the standard config.rb file and a config.production.rb file with all our standard production settings as a hash/associative array. We then reference these hash keys as the compass constants in config.rb.
If a developer wants to override any settings then they just add a config.development.rb file in the same location as config.rb and config.production.rb and define their overrides.
Example
config.rb
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Define the paths for config files.
productionSettings = File.join(File.dirname(__FILE__), "config.production.rb")
developmentSettings = File.join(File.dirname(__FILE__), "config.development.rb")
# Include the production config
require productionSettings if File.exist?(productionSettings) and File.file?(productionSettings)
# Set the compass settings to productionSettings $configSettings
compassSettings = $configSettings
# If a development config file exists include it and merge it's $configSettings
# with the current compassSettings
if File.exist?(developmentSettings) and File.file?(developmentSettings)
require developmentSettings
compassSettings = compassSettings.merge($configSettings)
end
# Compass settings. If statements to prevent errors if a key doesn't exist.
# Note that any additional settings you add to production or development
# will need to be referenced here else compass won't pick them up.
http_path = compassSettings['http_path'] if compassSettings.key?('http_path')
css_dir = compassSettings['css_dir'] if compassSettings.key?('css_dir')
sass_dir = compassSettings['sass_dir'] if compassSettings.key?('sass_dir')
images_dir = compassSettings['images_dir'] if compassSettings.key?('images_dir')
javascripts_dir = compassSettings['javascripts_dir'] if compassSettings.key?('javascripts_dir')
fonts_dir = compassSettings['fonts_dir'] if compassSettings.key?('fonts_dir')
output_style = compassSettings['output_style'] if compassSettings.key?('output_style')
relative_assets = compassSettings['relative_assets'] if compassSettings.key?('relative_assets')
line_comments = compassSettings['line_comments'] if compassSettings.key?('line_comments')
color_output = compassSettings['color_output'] if compassSettings.key?('color_output')
preferred_syntax = compassSettings['preferred_syntax'] if compassSettings.key?('preferred_syntax')
sourcemap = compassSettings['sourcemap'] if compassSettings.key?('sourcemap')
cache_path = compassSettings['cache_path'] if compassSettings.key?('cache_path')
config.production.rb
$configSettings = {
'http_path' => "/",
'css_dir' => "css",
'sass_dir' => "sass",
'images_dir' => "images",
'javascripts_dir' => "scripts",
'fonts_dir' => "fonts",
'preferred_syntax' => :scss,
'color_output' => false,
'output_style' => :compressed,
'sourcemap' => false,
}
config.development.rb
$configSettings = {
'cache_path' => '/tmp/sass-cache',
'output_style' => :expanded,
'sourcemap' => true,
}
I am getting an error with compass watching my directory correctly but fails to generate my output. I am thinking it has to do with either my GEMFILE or compass.rb config file.
ERROR: Guard::Compass failed to achieve its <run_on_change>, exception was:
Compass::Error: Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Guardfile
# More info at
# https://github.com/guard/guard#readme
# https://github.com/guard/guard/wiki/Guardfile-examples
# Launch Guard like this: [bundle exec] guard -g ui
group :ui do
# guard :bundler,
# :hide_success => true do
# watch('Gemfile')
# end
guard 'compass',
:output => 'client/css',
:workdir => 'source/sass',
:configuration_file => 'config/compass.rb',
:hide_success => true do
#watch('source/sass/(.*)\.scss')
watch(/source\/sass\/(.*)\.s[ac]ss/)
end
end
And my compass.rb file
require 'sass'
require 'compass'
# Require any additional compass plugins here.
# Get the directory that this configuration file exists in
dir_src = File.dirname(__FILE__)
# Set this to the root of your project when deployed:
http_path = "/"
project_path = File.join(dir_src, "../", "")
sass_dir = "source/sass"
sass_path = sass_dir
css_dir = "client/css"
#css_path = File.join(dir_src, "client", "css")
#images_dir = "img"
#images_path = File.join(dir_src, "../public", "img")
#javascripts_dir = "js"
#javascripts_path = File.join(dir_src, "../public", "js")
#Environment
#environment = :development
# 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 = :expanded
# 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
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
#preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
debug_info = false
My folder structure is as follows with my top level directory.
project/
client/
css
source/
sass/
Not sure why compass fails to compile?
Edit:
The sass_path should be an absolute path. In your configuration, it's relative.
Try commenting it out, you already have sass_dir.
If this doesn't help, please share your project directory structure.
Below is the error that I get on executing compass watch -
LoadError on line ["36"] of /home/murtaza/.rvm/rubies/ruby-1.9.3-p194/lib/ruby/site_ruby/1.9.1/rubygems/custom_require.rb: cannot load such file -- ceaser-easing
How do I remedy it?
It was due to plugins that had to be installed.
Adding the content as requested -
# Require any additional compass plugins here.
require "ceaser-easing"
require "grid-coordinates"
require "compass_twitter_bootstrap"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "templ/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
preferred_syntax = :sass
Hi I'm messing around with SASS and sprites, and it works fine. It generates a lot of clases from the filenames of my images, which I can use in my markup.
But I would like to use the sprite without changing markup.
This is what I have
my images are located under images/raw
one of the images is called spr-links.png
in my css I have
#import "raw/*.png"; //Sprite
I should be able to to like this, but nothing comes out. SASS does not even fail on this
.footer{
#extend .raw-spr-link;
}
Just uncomment "relative_assets = true"
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
relative_assets = true
output_style = :expanded # by Compass.app
sass_options = {:debug_info=>false} # by Compass.app
line_comments = true # by Compass.app