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
Related
When I run compass compile, the operation runs successfully, but no CSS files are created in my CSS directory. This is my folder structure:
css
images
src
-config.rb
-screen.scss
-overrides.css
And my config.rb file:
http_path = "./"
css_dir = "../css"
sass_dir = "./"
images_dir = "../images"
javascripts_dir = "../javascripts"
line_comments = false
compass v1.1.0.alpha.3
sass v3.4.22
sass-rails v5.0.4
ruby v2.1.1p76
The problem should be with the directories you've specified for your assets i.e css_dir, sass_dir, images_dir and javascripts_dir
The values for the directories are all relative to the http-path.
With the current value for the css_dir in your code, Compass should be generating the css outside your project folder.
You paths should look more like
http_path = '/'
css_dir = 'css'
sass_dir = 'sass' // I suggest you create a folder for all your sass files
images_dir = 'images'
javascripts_dir = 'javascripts'
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'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.
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