I've been messing around with Compass, using the Scout GUI, for a day now and sprites are driving me crazy.
Compass is creating the sprite but it seems the CSS is pointing to the wrong place.
The import statement looks like:
#import "images/icon/*.png";
And, here's how I'm calling it:
h1{
#include icon-sprite("social");
The link that is getting created in the CSS is:
http://localhost/images/icon-s25f42076dc.png
I would like it to be:
http://localhost/compass/images/icon-s25f42076dc.png
This is my config.rb:
http_path = ""
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
relative_assets = true
Change 'relative_assets' to false.
Figured it out:
Import path needs to be
#import "../compass/images/icon/*.png";
Related
I have successfully installed Sass and Compass-sass, but I'm having trouble importing Compass. showing this error ""Error: File to import not found or unreadable: compass/css3"
Here is my compass import
#import "compass/css3";
here is my config.rb
http_path = "../"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
Please See attached Screenshot
Please help me guys what i have write wrong in my code
I've just created the 2nd of 2 Drupal sites on my local environment - both styled via sass/compass.
When I run compass watch on the new site, it compiles the scss from the first site into the new site's css file.
How can I make sure the two are separated?
There's a config.rb-file in each (drupal) site's theme folder site:/sites/all/themes/themename/config.rb
Contents of both files are:
relative_assets = true
css_dir = "css"
sass_dir = "scss"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
environment = :development
I'm executing Compass Watch from the theme folder of the site I'm working on.
I'm using SASS sprites: http://compass-style.org/help/tutorials/spriting/
'channel' is the folder name in 'images' that contains my images to be sprited. The following does create an image sprite:
#import "compass/utilities/sprites";
#import "channel/*.png";
#include all-channel-sprites;
However the image path in the CSS is slightly wrong. Its output is this:
background-image: url('/images/channel-s78ec12c377.png')
But I actually need this:
background-image: url('../images/channel-s78ec12c377.png')
I've tried changing my import to this but it throws an error:
#import "../channel/*.png";
Turns out it was to do with the config.rb file. It needed this line:
relative_assets = true
I have been struggling with SASS and Compass on my Mac OSX for the last few days.
I have a setup like below (this is as accurate as I can make it).
Ive only done 1 site but there are around 40 with identical structure below proxysite1.com
/Library/WebServer/Documents
/WebProxy-Network
/Global_Assets
/_alerts.scss
/_badges.scss
/_breadcrumbs.scss
/_button-groups.scss
/_buttons.scss
/_carousel.scss
/_close.scss
/_code.scss
/_dropdowns.scss
/_forms.scss
/_grid.scss
/_labels.scss
/_print.scss
/_bootstrap.scss (all the files above import into this one and will use shared by all the sites)
/Asia
/USA
/EU
/UK
/www.proxysite1.com
/scss
_variables.scss
_overrides.scss
styles.scss (this imports _sass-bootstrap.scss, _variables.scss & overrides.scss)
/css
styles.css (ok so this should be the FINAL output unique for each site)
/js
/images
/index.inc.php
/index.php
/config.rb
Inside my config.rb I have these settings:
# Require any additional compass plugins here.
load "../../Global_Assets/Bootstrap3"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
Now inside my /scss folder file styles.scss
I have the following:
// Site Overrides
#import "overrides";
// Site Variables
#import "variables";
// Bootstrap3 SASS Framework
#import "bootstrap";
Right so that took a while but I want to get some good advice on where i'm going wrong ;)
Now when I visit this path via terminal
/Library/WebServer/Documents/WebProxy-Network/UK/www.proxysite1.com/
and run the command "compass watch" I get the following message:
Ants-MacBook-Pro:www.antproxy.com Ant$ compass watch
>>> Change detected at 10:17:28 to: styles.scss
error scss/styles.scss (Line 24: File to import not found or unreadable: sass-bootstrap.
Load paths:
/Library/WebServer/Documents/WebProxy-Network/UK/www.antproxy.com/scss
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/compass/stylesheets
Compass::SpriteImporter)
overwrite css/styles.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.
So hopefully this is enough info to get some good insight in to where I'm going wrong, hopefully its been clear and I'm on the right path :)
BTW the idea was to have it so I can specify different variables for each site allowing me to change colors fonts etc but share layout styles and functionality styles.
(I would have posted this as a comment however I do not have the priviledges.)
I suspect that you may have gotten some of your indentations wrong in your post as running "compass watch" in the "www.proxysite1.com" directory while the config.rb file is within "assets" wouldn't work as compass wouldn't be able to find the configuration and would assume that no compass project existed.
Regardless, how are you including Bootstrap 3?
If you are not already using it already, I would recommend trying Thomas McDonald's bootstrap-sass. Available here: https://github.com/thomas-mcdonald/bootstrap-sass
UPDATE:
Why are you including Bootstrap 3 like this?
// Bootstrap3 SASS Framework
#import "sass-bootstrap";
If you have included the correct require statement in your config.rb (inc. below) then you should be able to import it like this mate:
// Bootstrap3 SASS Framework
#import "bootstrap";
Inside of config.rb, you should have this at the top:
# Require any additional compass plugins here.
require 'bootstrap-sass'
load "../../Global_Assets"
I've just started with sass today and hit my first roadblock. I don't know how to use font-face inside my scss files. Here's what I've tried, inside my app.scss file:
//do I need this line? I have installed compass
#import "compass/css3";
#include font-face("myfont", font-files("myfont.eot", "myfont.woff", "myfont.ttf", "myfont.svg#myfont"));
And this is what I get rendered:
#font-face {
font-family: "myfont";
src: url('/assets/css/fonts/myfont.eot') format('embedded-opentype'), url('/assets/css/fonts/myfont.woff') format('woff'), url('/assets/css/fonts/myfont.ttf') format('truetype'), url('/assets/css/fonts/myfont.svg#myfont') format('svg');
}
My config.rb file:
http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/img"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
And my right now my file structure is this www.mydomain.com/nameofmyproject and inside I have a folder called assets that contains css, sass, img, fonts, js folders
EDIT: Since this seems to be an issue with the paths I will edit my question. I'm working on a subdirectory here and firebug shows me a 404 for my font files, with the following url: www.mydomain.com/assets/css/fonts So it's both ignoring that I'm on a subdirectory and that I changed my fonts_dir to be inside assets and it goes to the default, inside the css directory.
When updating your config.rb file, You have to restart compass watch. Took me hours to figure that out. Hope this helps someone.
Yeah my problem was a mix of issues, not restarting compass watch was not helping me debug the problem correctly and having a messed up installation was the problem at hand. I reinstalled and then started from scratch and it ended working just fine.