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.
Related
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'm trying to include Fontawesome with a Rails 4 app however the assets aren't making it into the asset pipeline. However, the fonts aren't making it out in production and I can't figure out why.
File structure organisation
All my assets are stored in /assets/components
so that Fontawesome appears in: /assets/components/font-awesome (they're in a different directory because I'm using Bower).
CSS manifest file:
# application.css.scss
/* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/
Asset pipeline is set to precompile fonts
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ /\.(eot|svg|ttf|woff|otf)\z/
true
end
}
I added the precompile instructions so that the fonts would all be precompiled as per this question
Heroku 12 Factor gem is included
#gemfile
group :production do
gem "rails_12factor"
end
So what's the problem?
When I push to Heroku, it shows that the application is requesting the files but that they're not loading:
And looking at the logs it seems to be a routing issue - I would have expected the font to be served from /assets/fonts but it is apparently looking in /fonts
app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000
app[web.1]:
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.ttf"):
Why aren't the assets getting served
I'm a bit confused with all of this. Why aren't these fonts being served?
This problem maybe caused by a reason that Rails assets can't precompile url() function in CSS file.
Because your fonts files are precompiled by assets, all urls point to these files must be rewritten to MD5-digested file name. Unfortunately Rails can't precompile url() automatically, at least I think so because I tested some cases and got this conclusion :) In Rails guide, Rails provides these functions using ERB and Sass. see here .
I think there are two ways to solve your problem.
The first, set directory in .bowerrc to public/components and use them manually, don't require them in your assets.
The second, I suggest to use font-url() instead of url() in Font-Awesome, so your application.css.scss will be looked like:
/* ...
*= require bootstrap/dist/css/bootstrap
*= require font-awesome/css/font-awesome
*= require_self
*= require_tree .
*/
#font-face {
font-family: 'FontAwesome';
src: font-url('font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3');
src: font-url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
font-url('font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
font-url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
font-url('font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Redefine the font-path with your actual font path and font-face with font-url() , this function is provided by sass-rails. After precompile, you will see your url has been rewritten to /assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3 or something like in public/assets/application-xxxxxx.css.
You can find the same approach in various gems which include assets for example bootstrap-sass, it's a very popular gem. read this file: _glyphicons.scss. You will see:
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('#{$icon-font-path}#{$icon-font-name}.eot');
src: font-url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
font-url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
font-url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
font-url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
}
url() has been replaced. So I think rewrite #font-face in application.css.scss is the simplest way :)
By the way, bootstrap and font-awesome both have #font-face. I don't know whether font-awesome is necessary.
When you access the page, it shows the correct log. So you don't need change any code in bower repositories. Hope it helps.
I'm running a site on Heroku, and having some troubles getting a google font to load.
My typography.sass file contains this:
#import url(http://fonts.googleapis.com/css?family=Bitter)
h1
font-family: 'Bitter', Helvetica, serif
My production.rb file contains the lines:
config.serve_static_assets = true
config.assets.compile = true
config.assets.digest = true
My Gemfile includes:
gem 'rails_12factor', group: :production
I've gone through all the Heroku issues with the asset pipeline, and I've gotten all of my images and css files to load properly in production, but for whatever reason, the font only works in development.
I had the same problem and found this answer:
https://stackoverflow.com/a/18216759
It appears that Heroku wants https. So throwing in https solved the problem for me.
I used to have the same issue but deleting the assets folder located in the public folder solved the problem for me. This will let Heroku precompile the css files for you and not use the files generate by running rake assets:precompile locally.
This fellow seemed to have a similar problem to yourself:
http://robert-reiz.com/2012/11/16/google-fonts-on-heroku/
Try his method of fixing it and see if that works. Good luck!
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";
config rb is running default values.
the folder structure is also the default one.
in my scss file i do.
#import "icons/*.png";
#mixin sprite_css($name) {
#include icons-sprite($name);
height: icons-sprite-height($name);
width: icons-sprite-width($name);
display:block;
}
.btn {#include sprite_css(deltag);} //deltag is the name of a png image in the sprite.
Prior to this i made a folder under the images folder, called icons
here i put all my png files in.
The generated css code looks like this.
.icons-sprite, .icons-deltag, .icons-deltag_grey, .icons-deltag_mouseover, .icons-facebook_del, .icons-faneblad, .icons-soegefelt, #container .btn, #container .btn_over {
background: url('/images/icons-s93e62b2fff.png') no-repeat;
}`
notice the background path is set without the trailing dots infront of images folder, so my CSSfile that is placed in the stylesheets folder is now looking for an image folder inside the stylesheets folder, so obviously the files are not loaded. I cant seem to change this anyway. changing config rb to relative_assets = true is not working.
I want the css file to point the sprint to.
background: url('../images/icons-s93e62b2fff.png') no-repeat;
that is the correct path, how can i achieve this?
The Compass config.rb file is loaded each time you run a Compass command. If you are running compass watch you must exit the process and then start it again in order to reload changes to the config.rb file.