Should be relatively simple, by I can't quiet figure it out.
I have this:
.parent
#include grid-row()
.main
#include grid-column(8)
.sidebar
#include grid-column(4)
The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.
I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.
In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.
So how do I make use of that variable, or otherwise set gutter widths?
You should set values of the configuration variables prior to importing Foundation.
See http://compass-style.org/help/tutorials/configurable-variables/ :
Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:
$blueprint-grid-columns = 12
#import "blueprint/grid"
Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss
or _base.sass.
I had this same issue and in my case the problem was that I was never actually using the _settings.scss file. And since this was the case, none of my changes were being reflected on the site.
If this is the same for you, then what you need to do go to the screen.scss file, make sure its calling #import "app". Once this is confirmed, go to the app.scss file and at the top make sure you call #import "settings". Once you do this, the settings in the _settings.scss file should actually cause an affect on the gutter settings that you want to change.
Related
I am gonna use css global variables in scss file so that I can change the button colour in any time.
I want to do like this:
:root {
--button-color: #FF0000;
}
$button-color: var(--button-color);
...
But this makes the issue now.
SASS variables are compile time and final value depends on all files were #import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).
Also take a look into docs section on difference between
You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.
Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.
TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.
We are working on an MVP in vue.js and we decided to use bootstrap to have the element styled in a consistent way.
Now we are starting to add the skin/theme to our single-page app, and we found an issue with the css rendered on the page.
We successfully managed to override the styles by using higher specificity css selectors, but we would like to optimise the output code rendered in the browser by removing the unused "base" bootstrap css code.
The question:
How can we setup our environment to make the bootstrap sass code to output clean and non-redundant css code?
Details:
Bootstrap loads its own _buttons.scss file
We are loading our own "theme" _buttons.scss file after bootstrap's one and we managed to have our css with higher specificity.
We run the sass code compiler (on node-sass)
The output css contains BOTH the bootstrap style and our own themed style for the buttons.
(As an example, see the following screenshot)
As you can see our own button style is applied as intended but we still carry over the bootstrap original style.
We would like to have OUR STYLE ONLY rendered in the browser.
Update:
The UI I'm working on uses some classes straight from bootstrap, and obviously some classes specific of our own app.
Sometimes these classes are necessary to override the bootstrap default styles.
We need to override not only the colours (which are customisable through the _variables.scss), but also some other css attributes.
We find ourselves struggling with duplicated css code rendered in the browser, where there is our own style applied and also the default bootstrap generated style which will never be applied as it's low in specificity.
I wonder if there is a way to avoid to compile sass code that doesn't need to be rendered in the browser, and at the same time avoid to "touch" the bootstrap code in ./node_modules/.
Here's how you override Bootstrap (4.x) defaults.
Examine the source
First, look inside bootstrap.scss where you can see how the framework is built, component by component. You could, if you like, comment out optional components you don't need, to downsize Boostrap. But don't do that right now.
Next, look inside _variables.scss. Skim through this file and it should be clear that all customisable Bootstrap styles are defined here, including colors. Thus you can have your custom colors apply not just for buttons but throughout the whole framework. Again, you could start changing the variables you want here right now... but don't, for there is a Best Practice.
Create customisation file
Instead of editing the original source, create a new source file we'll call myproject.scss, somewhere other than the Bootstrap source folder. By keeping all changes separate, we make any future Bootstrap upgrades easy.
Add variable overrides
Now you can start copying variables you want to change. Note that variables in _variables.scss have the !default flag, which means they can be overridden elsewhere. For example if you want a different secondary color, you'll find it defined as $secondary, and so add it to myproject.scss with a new value:
$secondary: #dd5679;
Add as many variable overrides as you want.
Import Bootstrap
After that, import Bootstrap into the file. EITHER take bootstrap.scss wholesale:
#import "relative/path/to/bootstrap/bootstrap";
OR copy-paste the contents of bootstrap.scss, update the pathnames, and comment out the components you don't want:
#import "relative/path/to/bootstrap/functions";
#import "relative/path/to/bootstrap/variables";
#import "relative/path/to/bootstrap/mixins";
...
// #import "relative/path/to/bootstrap/popover";
// #import "relative/path/to/bootstrap/carousel";
#import "relative/path/to/bootstrap/utilities";
#import "relative/path/to/bootstrap/print";
The first 3 imports, "functions", "variables" and "mixins" are core and not optional components; don't exclude them.
Add project styles
After that, add your own styles. If you have a significant amount, organise them into their own partial files e.g. _mybuttons.scss (start names of partial files with an underscore), and import them.
#import "mybuttons";
Your custom Bootstrap source file is now ready.
Compile to CSS
The resulting myproject.css file is what you want to load instead of the original Bootstrap CSS file.
I have two stylesheets built from the same .scss files that only differ in a few places. One is a master with all styles and the other is missing a few pieces here and there. These need to coexist, they each have a specific use case and are intended to be downloaded by the user. Because webpack won't bundle CSS on its own, I have to import both of these stylesheets which means they can potentially affect my site.
My index.js is along the lines of
import "./master.scss";
import "./specific-case.scss";
My webpack.config.js is along the lines of
module.exports = {
...
...
plugins: [
specificCaseExtraction,
masterExtraction,
...
I'd like the whole application to use master.scss styles, but there are a few places where spceific-case.scss is stepping in an messing up the styling, despite them using the same source (precedence is pretty well defined with the sheets themselves, but they don't play well together which only a problem in this demo application and will never be the case when used properly).
Basically, my question boils down to this: Is there a way to ensure that one stylesheet takes precedence over another? Is it a matter of ordering? I tried swapping them in index.js but it didn't help, and swapping them in webpack.config.js is a bit more complicated because the masterExtraction is called manually while the specificCaseExtraction is actually one of many that is injected dynamically. Or, better yet, is there a way to have webpack compile and package .scss into .css without having the inject it into the page itself?
UPDATE:
Turns out that in times of equal specificity, the style that's further down the sheet is the one that takes effect. That means that reversing the order of the plugins in the list made the master.css appear below the specific-case.css in the final index.html which means that the master styles always take precedence over any others and my problem is solved.
CSS specificity is in order of precedence.
This is the best article I have seen by far: https://css-tricks.com/specifics-on-css-specificity/
Here is a similar project using LESS instead of SASS but the concept is the same.
https://github.com/mabbashm110/Sprint-Challenge--Responsive-Less
Hope that helps.
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
I would like to use a base stylesheet with the colours defined as dotless variables.
Then, depending on the color theme that I use I would like to change this colors.
- example of base stylesheet:
body
{
color: #brand_color;
}
- Example of specific stylesheet, depending in the color scheme I pick:
#import "../BaseStyleSheet.less.css";
#brand_color: green;
How can I achieve this?
You need to change the extension of your imported file to .less
Less only compiles imports if they end in .less if they end in something else it takes the content of the file literally and just inserts it in your file.
Also note that you may have to put the #brand_color: green declaration before the import so the imported file can access it.
The extension of the imported file should be ".less".
Changing the variable value after or before the import statement makes no difference, it just doesn't change the variable value, making what I wanted not possible.
"Imports will not have access to variables in the main reference Less file (or other referenced Less files in the main one). This ensures that imported Less files have no dependencies on where they are been used."
http://enginechris.wordpress.com/2009/11/23/my-thoughts-on-using-dotless-and-the-less-syntax/