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.
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've tried many responses already, but for some reason I can't get this to work. The error is:
No files were found in the load path matching "sprites/*.png"
My config.rb code:
relative_assets = true
cache=false
Encoding.default_external = "utf-8"
#########
# 1. Set this to the root of your project when deployed:
http_path = "/"
http_generated_images_path = "../images";
# 2. probably don't need to touch these
css_dir = "../css"
sass_dir = "./"
images_dir = "../images"
images_path = "../images"
javascripts_dir = "../js"
environment = :development
line_comments = true
My folder structure:
css
images
- sprites
scss (config.rb located in scss folder)
- partials
- - _mixins.scss (the file where the error is occuring)
And in mixins:
#import "sprites/*.png";
Any ideas what's wrong with the paths?
Thanks for any help.
First question is: do you actually have any files in your sprites folder? If yes, try adding this setting:
generated_images_path = "../images"
http_generated_images_path will be used to define what is the final path for the generated image, in the final (compiled) css, so maybe the setting above (without http_) is the one you need. My project structure is different but it works fine for me, I have more settings pointing to the same path though, this is what I have:
images_dir = "/assets/img"
generated_images_path = "assets/img"
http_images_dir = "assets/img"
http_images_path = "assets/img"
If just the first one doesn't solve the problem for you, try maybe adding all these?
Worst case change your project structure so you don't have to go up one level to get the folder (not saying that this is the problem as it shouldn't be but well, testing is the best way to find out)
I tried various options here. In the end I updated to Ruby 2.1.5 and turned off the Compass "save on build" plugin for Sublime, which seems to have fixed it. Not a perfect solution, but it works for now!
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 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.
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