I'm new to Bourbon & SASS and trying to use the #font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app.
Bourbon provides the following examples:
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);
// Rails asset-pipeline - place fonts in app/assets/fonts/
#include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);
What I did:
// application.css.scss
#import "bourbon";
#import "fonts";
// fonts.css.scss
#include font-face(MuseoSans, '/fonts/MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
* {
font-family: MuseoSans;
}
The fonts are in assets/fonts/MuseoSans/ with filenames like MuseoSans_500-webfont.eot, .ttf, etc. I get the impression you can leave off the extension and Bourbon is supposed to pick up all the files.
I've tried a lot of different variants of the above to no avail. I know that Bourbon and the files are working because when I set the font-family to $helvetica I see a change on the page.
If anyone can provide the proper code, or a GitHub project that I could look at, I'd be much obliged.
Try removing the leading "/fonts" in your in your path like:
#include font-face(MuseoSans, 'MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
I had some issues working with this mixin as well - I would get IOerrors if the following files were not present in the fonts directory: "myfont.eot?#iefix" and "myfont.svg#myfont."
However, when I added those files, I found that they were not getting precompiled (i.e. they lacked a MD5 thumb print and weren't present in the asset manifest), so I decided to override this mixin and rewrite it using modified asset-path methods.
Related
I need to reduce the font-size of Bootstrap's Jumbotron header in Rails.
I see here
that I need to add something like
#jumbotron-heading-font-size: ceil((#font-size-base * 2.5));
in my file
app/assets/stylesheets/bootstrap_customization.css.scss
So I changed "#" to "$", please see below how the file looks now:
$jumbotron-heading-font-size: ceil(($font-size-base * 2.5));
$jumbotron-padding: 20px;
#import "bootstrap";
But this doesn't work.
I've found a solution.
As I'm using Bootstrap 4, I had a look at
https://github.com/twbs/bootstrap-rubygem/blob/master/assets/stylesheets/bootstrap/_variables.scss
and found $display3-size variable there (this is a class for h1 tag inside Jumbotrone), so then I added the following line before #import bootstrap into my .scss file:
$display3-size: 2.5rem;
So it works now
I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:
#import 'jqtouch';
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.
I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.
I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.
The ruby config file for compass seems to be unsuspicious.
Does anyone have an idea what goes wrong in the process so that my override values are ignored?
You're setting the color after it has already been used. Basically, what you're trying to do is this:
$color: red;
.foo {
background: $color;
}
$color: green;
Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:
$color: green;
$color: red !default; // red is only used if $color is not already set
.foo {
background: $color; // color is green
}
So your code should be written as such:
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
#import 'jqtouch';
I am using SASS for the first time, and my variables seem to have stopped working. I have the following code in my application.css.scss file:
*= require_self
*/
#import "layout";
#import "colors";
...
#import "text";
In my partial _colors.css.scss file, there is:
...
$ct-white: #F8F8F8 !global;
and in my partial _layout.css.scss file (the Rails default layout file):
/* Site-wide layout syntax */
body {
background-color: $ct-white;
}
I know that the _layout.css.scss file is loading because other styles on the page work fine when I set body { background-color: #F8F8F8; }. For some reason, the variable isn't being parsed correctly.
Any ideas why?
You're importing colors after layout , so the variables you define in colors are not available for layout. You could simply invert the order of those two lines. In SASS, import order matters.
If you're using the sass-rails gem, it uses sass 3.2.0 so !global throws an error.
I'm using SASS(.scss) on a rails (3.2.13) project and use variables & mixins for my media queries like so:
$desk-wide-start: 1100px !default;
#mixin media-query($media-query) {
#if $media-query == desk-wide{
#media only screen and (min-width: $desk-wide-start) { #content; }
}
}
// I include the mixin like so
#include media-query (desk-wide) {
margin-top: 0;
}
This site is running and working fine live, but I have been working on it locally (Lets call this code B) and made a few changes and now my media queries (mixins) have stopped working (they appear to NOT be compiling). If I write a #media query, this will work however.
I rewound my changes through Git to the code I last deployed to the live site (lets call this code A), and the mixins worked, I swapped back to my changes (code B) and then back to the working code (code A) and they had stopped working on this as well.
I get no Rails errors, and I have hard refreshed / cleared the cache on both Chrome and Firefox (latest stable).
Any ideas what could be causing the mixins to not compile / work?
So far i've tried rolling back in Git (see above) and updating the sass-rails gem to the latest version, I can't think what else may be causing it.
This may help someone else in the future - I've resolved this by figuring out I had a gem that also had:
#mixin media-query($media-query) {
}
This must have been causing some kind of conflict when compiling, shame Rails didn't flag it up for me.
I simply changed one of the #mixins to #mixin mq($media-query)
I'm trying to refer to a mixin defined in one file (application.css.scss) in another (home.css.scss). I have tried importing application into home but still get an "Undefined mixin" error.
Is there a way to automatically import all of my files, or what is the best way to manage imports between files?
I haven't been able to make the jump to 3.1 yet, but using Compass & Sass for quite a while, I've found it's best to try to manage mixin/definition sass separately from your actual CSS generating sass. In this way, the mixin files can be treated freely like code libraries, included wherever necessary, without them repeatedly generating CSS rules.
So you might have:
/* my-mixin-concern.scss */
$default_foo: 123px !default;
#mixin some-concern($foo: $default_foo) {
// do something
}
/* application.scss */
$default_foo: 321px; // optionally, pre-set the default value before import.
#import 'my-mixin-concern';
p { #include some-concern; }
/* home.scss */
#import 'my-mixin-concern';
body.home p { #include some-concern(9000px); }
In this way you are explicitly importing all requirements for each scss file, similarly to how you would do so in a code library.
Pure Rails Solution
Step 1. Rename
application.css -> application.css.scss
Step 2. Refactor
// application.css.scss
/*
*= require_self
*/
#import "mixins.css.csss"
#import "project.css.scss"