I'm having a hard time figuring out how to use Foundation with Rails.
I have the foundation-rails gem installed and all configured, and I have no problem using Foundation classes in my markup. However, I'm trying to use #extend in my stylesheets, and it's not working. This is the my complete connections.scss file
.btn {
#extend .button
}
There is an error in my logs:
WARNING on line 3 of <snipped>/connections.scss: ".btn" failed to #extend ".button".
The selector ".button" was not found.
I'm guessing I'm just missing an #import or something, but not really sure. Any ideas?
Thanks
I didn't RTFM very well.
I made my application.scss look like this:
/*
*= require_self
*= require foundation_and_overrides
*/
#import 'foundation_and_overrides';
#import '*';
Related
I have installed bootstrap 4.5 into RAILS 6 and I want to extend some styles.
For that I have a file named banana.scss in app/assets/stylesheets that looks like this :
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Now I want to embed this stylesheet after bootstrap is loaded, so I have modified the app/assets/stylesheets/application.css by
/*
...
*= require banana
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
But this leads to the error message in the browser to :
Error: The target selector was not found.
Use "#extend .form-control-sm !optional" to avoid this error.
on line 5 of app/assets/stylesheets/banana.scss
>> #extend .form-control, .form-control-sm;
But what is the remmmended way to extand bootstrap ?
I think the only issue is that you *= require banana before you #import 'bootstrap'. Try removing the first one:
/*
...
*= require_tree .
*= require_self
*/
#import 'bootstrap';
#import 'banana';
I've found an easy way to accomplish that.
Just import the bootstrap on the beginning of my custom stylesheet:
#import 'bootstrap';
.form-read-only {
#extend .form-control, .form-control-sm;
background-color: rgb(233, 236, 239)
}
Because I can't define the order in which the stylesheet files are loaded, here I'm sure when the custom stylesheet is loaded, in front of the depending bootstrap stylesheets are loaded at first.
I have a Rails 4 app, using the foundation-rails v5.2.1.0 gem, and one custom SCSS file for my application layout. When I use a variable from the foundation_and_overrides.scss file, I get the following error:
Undefined variable: "$header-font-family"
I've included relevant code below. I can post more if needed. Anyone know what's going on here?
From application.css:
*
*= require foundation_and_overrides
*= require_self
*= require_tree .
*/
From foundation_and_overrides.scss:
// We use these to control header font styles
$header-font-family: "futura-pt", sans-serif;
$header-font-weight: 400;
// $header-font-style: normal;
From custom.css.scss:
$include-html-global-classes: false;
#import "foundation/components/global";
.
.
.
.footer {
background-color: black;
color: white;
height: 100px;
font-family: $header-font-family;
}
You are getting the error because foundation_and_overrides.scss is executing after custom.css.scss. Best way to do this is to define your variables in a partial and import it in your main stylesheet after foundation.
First change the file name from
foundation_and_overrides.scss to _foundation_and_overrides.scss
and then import it in custom.css.scss file after foundation with
#import 'foundation_and_overrides';
Update
Rename your application.css to application.css.scss and custom.css.scss to custom.scss
In your application.css.scss remove *= require_tree .
And then import your main stylesheet with
#import 'custom'
I hope this helps
The cleanest way is to add the line
#import "custom";
to your file foundation_and_overrides.scss before the line
#import "foundation";
There's no need to remove *= require_tree . from application.css.scss as stated in the accepted answer. There's also no need to add require foundation_and_overrides to application.css if you leave require_tree . in there.
According to the Rails Docs:
If you want to use multiple Sass files, you should generally use the Sass >#import rule instead of these Sprockets directives. When using Sprockets >directives, Sass files exist within their own scope, making variables or >mixins only available within the document they were defined in.
So in this case the order of the directives (the lines in application.css that start with *=) doesn't matter because each of those files lives in its own scope and you can't access their variables from another scss file. That's why you want to either #import foundation_and_overrides and then custom, or #import your custom stylesheet into foundation_and_overrides.
I am using bootstrap-sass and the font-awesome ( https://github.com/littlebtc/font-awesome-sass-rails) gems. I would like to override the bootstrap font setting from that of font-awesome.
From font-awesome's site I can override the bootstrap defaults, if I just import if after bootstrap's import.
#import 'bootstrap';
#import 'font-awesome';
I have done the above, but font-awesome's font is not overriding. I have pushed my project on github - https://github.com/murtaza52/rails-base. The url is accessible on localhost:3000/posts
I will appreciate if someone can help me overriding bootstraps's default font with those of font-awesome's
Modify your application.css.scss to look like below
#import "font-awesome";
$baseFontFamily: 'FontAwesome';
#import "bootstrap";
...
#import "bootstrap-responsive";
//#import "scaffolds";
#import "posts";
WHY?
You move import "font-awesome" at the top and then define baseFontFamily because that's what bootstrap uses to define font-family for all the elements. Check Typography and links block in the middle. If you import bootstrap after this, FontAwesome will be used by default.
You should remove import "scaffolds"; line because scaffolds.css.scss will reset your font family for body element which will be inherited by every other element.
If you can't avoid importing it before bootstrap. I hope that helps.
For those of you guys using Bootstrap 3.2+ (I guess), here's the list of SASS variables you can modify:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
In our case, we want to make sure to define $font-family-base before doing #import "bootstrap".
By setting $font-family-base before the line below is reached, Bootstrap uses our $font-family-base instead (otherwise, it defaults to $font-family-base-serif, also defined in the variables.scss above).
$font-family-base: $font-family-sans-serif !default;
This is how my application.css.sass looks like
/*
*= require_tree .
*= require_self
*/
#import "fonts"
#import "compass"
#import "bootstrap"
And I have the following in _fonts.css.sass (You don't have to have it in a separate file)
$font-family-sans-serif: 'Roboto', verdana, arial, sans-serif
I don't know if this helps you but at least sometimes when template code seems valid you need to force refresh your browser with ctrl+shirt+r to see changes (works at least in mozilla).
Using Rails 3.
Right now in each new .css.scss file that I am creating, I want to be able to use the mixins, but I just couldn't seem to use it.
Here is my bootstrap_import.css.scss:
// Import bootstrap
// --------------------------------------------------
#import "bootstrap";
#import "bootstrap-responsive";
#media (min-width: 1200px) {
.span12, .container {
width: 1170px;
}
}
#import "base";
When I have another file called a.css.scss and I try to #include border-radius(12px);, but it just gives this error:
Undefined mixin 'border-radius'.
Same goes to variables, I would like to change some colors on some variables so that I can use it on any file without needing to include in each CSS file.
Thank you.
Only one import works in my project, probably a bug or a mistake from my side.
My solution with bootstrap-sass v2.0.3.1 to achieve a solution is:
(not 100% what do you expect, I know..)
I create a new scss file like: myAppBase.css.scss
/* override bootstrap default variables */
$linkColor: #FF0000;
$linkColorHover: #000;
#import "bootstrap";
/* App variables */
$bgImage: url('bg.jpg');
$radius: 4px;
$maxHeight:600px;
$minHeight:400px;
$bSize:1px;
and if i need bootstrap and my variables in an other *.css.scss file.
I include this line on the top:
#import "myAppBase";
I followed this guidelines and I was able to fix the error "undefined border-radius".
https://github.com/thomas-mcdonald/bootstrap-sass
Getting around to using sass in my latest rails project, specifically the bootstrap-sass gem to get all of twitter bootstrappy goodness.
Is it possible to reference the variables already defined? The vendor /assets/stylesheets/bootstrap/_variables.scss file contains declarations for colors.
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
$red: #9d261d !default;
Do I need to redefine these in the top of my base application.css.scss file or can I import/reference the variables file? I've tried a couple of approaches like this:
$bodyBackground: $black;
#import 'bootstrap'
But that errors out with undefined variable $black.
First, define the variable $black:
$black: #000;
$bodyBackground: $black;
#import "bootstrap";
or change it to:
$bodyBackground: #000;
#import "bootstrap";
Remove the below two lines from application.scss file:
*= require_self
*= require_tree .