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
Related
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.
This question already has answers here:
False positive "undefined variable" error when compiling SCSS
(4 answers)
Closed 8 years ago.
rails 3.2, bootstrap 3.
I use bootstrap sass gem and I can't do it work.
I have this error
Undefined mixin 'make-lg-column'.
in this file app/assets/stylesheets/exam.css.scss
...
.button-left{
#include make-lg-column(4);
display:inline;
padding-top: 5px;
}
...
this is my application.css.scss
#import "bootstrap";
#import "exam";
if I add these lines to exam.css.scss it works. But I don't want do it
#import "bootstrap/variables";
#import "bootstrap/mixins";
Please any advice is welcome, thanks for your help.
Do you want to compile the "exam" file as a part of application.css?
If I understand right, you should rename your file exam.css.scss -> _exam.scss and you don't need to add any other import.
it happens because exam.css.scss is a seperate file and compiler don't know anything about applications.css.scss
The mixin make-lg-column is defined within the bootstrap/mixins; file. In order to process the mixins file, you also need to provide the variables file. You can do 1 of 2 things:
Include the mixins and variables files within your exam.css.scss file even though it's not your preference.
You can copy the make-lg-column mixin out of the mixins file into the beginning of your exam.css.scss file.
.make-lg-column(#columns; #gutter: #grid-gutter-width){
position: relative;
min-height: 1px;
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
#media (min-width: #screen-lg-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
NOTE: You will have to redeclare your variables too.
In the stylesheets/bootstrap directory I have:
_variables.scss I have:
$black: #000 !default;
$grayDark: #333 !default;
...
$textColor: $grayDark !default;
This file is imported in the bootstrap.scss file:
// Core variables and mixins
#import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
#import "bootstrap/mixins";
...
In the stylesheets directory I have bootstrap_include.scss
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
I want to override the default text to be black, so I create a custom variables file and imported it in my custom bootstrap file
_variables_custom.scss:
$black: #000 !default;
$textColor: $black !default;
and then in bootstrap_custom.scss
#import "variables_custom";
Finally in the application.css.scss
*= require bootstrap_custom
*= require bootstrap_include
When I refresh the page, bootstrap_custom is always empty, I'm a css newbie, and why it isn't working?
Thanks
NOT SURE IF THIS IS NICE BUT I SOLVED IT USING:
my bootstrap_custom now includes
$black: #000 !default;
$textColor: $black !default;
#import "bootstrap/bootstrap";
#import "bootstrap/responsive";
and my application.css.scss now only includes
*= require bootstrap_custom
in your stylesheet, remove !default
that is, in your file _variables_custom.scss - instead of:
$black: #000 !default;
$textColor: $black !default;
use this instead:
$black: #000;
$textColor: $black;
!default is a sass variable flag that allows for reassignment before or after the !default is declared, with the non !default value always winning.
so:
$foo: black;
$foo: red !default;
body { background: $foo; }
will result in a black body background, even though red is declared after black
While we are talking about variables, there's nothing related to CSS. Variables, in this case, are used by SASS/Compass a CSS preprocessor tool, used by Rails to make the use of CSS more easy (eg. by using variables).
So when you insert your variables in a file, and let it be processed alone, it wont produce any CSS code unless you make any use of then in a valid CSS attribute.
If you want to test it, add to your bootstrap_custom.css something like:
body {
background-color: $black;
}
And you will see your $black variable being used.
Using Rails 3.2, compass-rails.
I have the following files:
screen.css.scss
#import "compass";
application.css.scss
/*
*= require_self
*= require_tree .
*/
#import "screen";
.content {
background-color: #eee;
padding: 20px;
margin: 0 -20px;
#include border-radius(6px, 6px);
#include box-shadow(0,0,0,.15);
}
application.html.erb (layout, just the relevant line):
<%= stylesheet_link_tag "application", :media => "all" %>
This works fine for my app layout.
Next, for the specific page I'm trying to style (home) I have home.css.scss:
#import url(http://fonts.googleapis.com/css?family=Oleo+Script+Swash+Caps:700);
#import "compass/css3/text-shadow"; <<-- This is the line I don't understand
.welcome {
text-align: center;
h1 {
font-family: 'Oleo Script Swash Caps', cursive;
font-weight: 700;
font-size: 110pt;
line-height: 130px;
#include single-text-shadow;
}
}
As soon as I drop #import "compass/css3/text-shadow";, my code breaks with Undefined mixin 'single-text-shadow'. The same thing happens if I move the text-shadow import line into application.css.css.
My question is why? I've included the entire compass framework in application.css.css via screen.css.scss. That file is loaded for sure because I see it working. So why do I need to do a double-include like this?
Unless home.css.scss is importing application.css.scss, this makes sense as expected behavior. You only need to import it once per compiled document, it will be available to any partials that are included in that document (and come after the import in your code).
It's common to import Compass once into a _base.scss partial (along with any other plugins you want available), and then import that partial anywhere you need your base settings.
i don't know if i understood your question correctly, but there is no double import here.
compass is a modular framework. you are not forced to use all it's parts. instead you can include only the parts you want. for simplicity, you can also require sub-parts like:
# application.sass
#import "compass"
#import "compass/css3/"
#import "compass/utilities/"
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).