I am attempting to override Bootstrap with SCSS so I can use my own code for the buttons. Bootstrap has been imported and is located within node_module inside of my project.
I basically want to get ride of the default square shape the button takes and have the background color to my specifications.
I decided to start with color and made my own color to be used instead of the value that Bootstrap relies on in the following format.
$button-color: rgba(255, 255, 242, 0);
#import "../../../node_modules/bootstrap/scss/variables";
This format I am using based off of the Theming Bootstrap page in the Importing section.
Argument `$color` of `darken($color, $amount)` must be a color
I looked this up on the website and noticed those that received this error had actually attempted to use this darken($color, $amount) format. I did not and I am not sure how to resolve this issue because I am not using it.
You need to import the _functions SASS file too...
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
Related
I am adding a custom font in my project when I am adding this font using normal CSS that time it's working but when I am using this font in SCSS processor CSS that time it's not working.
I am sharing the screen shot of file and console error.
I do not find where I am doing wrong. Please resolve my problem.
The message is pretty much self-explanatory. The issue is you are using = instead of a : to assign the value to the variable. It should be
$roboto-Regular: 'robotoregular';
Don't be so specific with the variable names, variables are meant to hold dynamic data. If tomorrow, you change the font to some other font, using roboto-Regular as the variable name would make no sense. You should use something like
$base-font: 'robotoregular';
$fallback-font: 'Arial';
font-family: $base-font, $fallback-font;
Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a config.rb file but im not using this anymore because im not using compass.
So i added all susy style in my project and thats works fine but its not my preferred method. But cant find a way to add breakpoint.
Is there a way to add these? Or do i have to use compass for this?
Sorry for my bad english, not very good at it.
No need for Compass, there's a new susy-media breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. That's what I use and it works great. So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:
// Define susy.
$susy: (
columns: 12,
gutters: .8,
);
// Define some breakpoints.
$bp-narrow: 30em; // 480px
$bp-med: 48em; // 768px
Now put it all together, say in _layout.scss for example:
// the breakpoint (media query)
#include susy-media($bp-med) {
// now a grid
.l-foobar-wrap {
.foo {
#include span(7)
}
.bar {
#include span(5 at 8)
}
}
}
For more info, read the susy docs, it's all there for you and this works with grunt-sass (LibSass). It's part of my everyday workflow.
Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media and it also works fine with LibSass.
I have a question related to background image url in Compass. I generated a sprite and I have the following path "images/social/facebook.png" but compass generated the sprite in the folder "images" (images/social-s17cf54cdde.png). When I inspect the element in the site I noticed that the background url isn't correct. I need to access one level up (../) so instead of "background-image: url('/images/social-s17cf54cdde.png');" I need "background-image: url('../images/social-s17cf54cdde.png');". How can I do that?
In the scss file I used these code:
#import "social/*.png";
#include all-social-sprites;
I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.
Looking at my CSS output I see things like:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
display: inline-block;
}
I have 2 questions:
This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole?
How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path
This is the piece of code I am referring to:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
Both answers are correct. To sum it up, there's no magic.
Bootstrap initializes $icon-font-path with a default value.
if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.
The syntax $icon-font-path: some_value !default; means - use this value if not already set.
So when you include you should do the following
/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts;
#include bower_components/bootstrap/bootstrap.scss;
paths might be different in real scenarios.
This seems to be a standard mechanism for publishing a reusable SCSS modules.
Here is the variables file where they set the $icon-font-path variable.
It looks like $icon-font-path is set to the foldername of the font files. not necessarily a security hole because its a relative path to the fonts.
The -sass-debug-info mess is rudimentary "source mapping", so browser developer tools can show you the original line number and filename of the Sass rule that generated that CSS (instead of the line number for the generated CSS).
Firebug has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.
It has nothing to do with fonts; font-family is just used because it's an easy way to shove a string into CSS in a way that's still accessible to JavaScript without actually affecting the rendering of the document. It also has nothing to do with Bootstrap; this is part of the scss compiler.
It won't be there in compressed output, which I hope you're using in production. :)
#guy mograbi: In Bootstrap-SASS-3.3.6, $icon-font-path in /bootstrap/bootstrap/_variables.scss #83 is declared like this:
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Since $bootstrap-sass-asset-helper is not defined yet, it may be useful to include the _variables.scss before overwriting the $icon-include-path, so we can read the "settings" and overwrite the $icon-font-path together with the if() cases.
We can use something like:
#include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
#include bower_components/bootstrap/bootstrap.scss;
How do I pass layout into my sprites calling them like this?
$sprite-global : sprite-map(
"sprites/global/*.png",
$sprite-global-layout: smart
);
That $sprite-global-layout: smart is completely ignored.
According to documentation, it should be applied like this:
$sprite-global-layout: smart;
$sprite-global: sprite-map("sprites/global/*.png");
So, apparently the directory doesn't get appended to the name for the layout variable, so this does in fact work:
$global-layout: smart;
#import "sprites/global/*.png";
Also, there might be issues using sprite maps instead of the #import to set them up; see https://github.com/chriseppstein/compass/issues/1024
I was able to get this to work by inserting them as variables:
$sprites: sprite-map("sprites/*.png", $layout: vertical, $spacing:20px);