I'm using the rails gem Bootstrap SASS, and was wondering how I can overwrite some of the mixins. Specifically border radius and the like.
I thought I could simply overwrite it like:
#import "bootstrap";
#import "bootstrap-responsive";
#mixin border-radius($radius: 1px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
But that doesn't seem to do squat! Any ideas?
Bootstrap SASS - Mixins
That is actually a mixin with an argument, SASS calls it a "mixin" but it's really a parametric or dynamic mixin. But to clarify your question, do you want to change the default value for the border radius mixin radius, or do you want to do it on the fly on a class by class basis? If you are looking to change the default you should do it directly in the Bootstrap mixin.scss file.
But if you want the latter, you just add the mixin to any class the same as you would add a property such as font-size, but then you pass in the value you wish to declare each time you use the mixin. Like this:
.giant-box {
width: 400px;
height: 400px;
background-color: #900;
#include border-radius(20px);
}
.small-box {
width: 10px;
height: 10px;
background-color: #900;
#include border-radius(3px);
}
In LESS it would look like this:
.giant-box {
width: 400px;
height: 400px;
background-color: #900;
.border-radius(20px);
}
Check the Customize and Download page on the Bootstrap site. There are list of LESS variables listed on the page.
Usually the SASS variables are the same but with '$' instead of a '#'. To customize bootstrap without having to re-download everything after changing one or two variables you can instead do this in your .scss file:
$border-radius-base: 0;
#import "bootstrap";
If you want to overwrite the Bootstrap variables, you need to do so before the import. E.g.
$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs
#import "bootstrap";
#import "bootstrap-responsive";
This is particularly late to the game but in Bootstrap 4 you can overwrite the enable-rounded Sass variable like so:
#enable-rounded false;
#import "~bootstrap/scss/bootstrap" /*lots of ways to do this step, see other answers herein*/
Bootstrap Sass Options Documentation
Related
I was wondering how i could make the color variables (e.g. $light-gray) available accross all my scss (i am using foundation 6).
I thought using *= require foundation_and_overrides at the top of my application.scss would make all variables available accross all scss files but i get the follwing error Undefined variable: "$light-gray".
Thanks for your help.
I do not know if this is the best practice. But I do it in such a way that I have another scss file called shared_variables.scss
// shared_variables.scss
$light-gray: #ccc;
Then inside foundation_and_overrides.scss, I import it (if you're going to use a variable in this file):
// foundation_and_overrides.scss
// ...
#import 'foundation-functions';
#import 'shared_variables'; // Add this line
// ...
Then import that as well for any other .scss file that depends on the global variables;
// posts.scss
#import 'shared_variables'; // Add this line
.posts-container {
background: $light-gray;
}
Basically, we can't use #import to make a variable globally. This is the reason:
Sass/Sass will take the file that you want to import and combine it
with the file you're importing into so you can serve a single CSS file
to the web browser.
Check this for more detail
Let's say you have a couple of Scss files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.
_reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
base.scss
#import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
The base.scss will be generated to base.css like this:
base.css
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
So import works like replacing reset content to the position importing reset in base!
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/"
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