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.
Related
I don't understand the difference between CSS custom properties (variables) and SCSS variables (I am new to Sass by the way).
If this CSS code:
:root {
--someColor: coral;
}
body {
background: var(--someColor);
}
achieves the same results as this SCSS code:
$someColor: coral;
body {
background: $someColor;
}
Why were SCSS variables introduced? Are they really the same as CSS variables, or am I missing something?
SCSS is a preprocessor. That means it is not CSS, but is converted into CSS at 'compile time'. In the resulting CSS code there is no resemblance to the original SCSS code. Hence you cannot change the variable values at CSS 'runtime'.
Historically SCSS is a fairly old technique. Actually it dates back to as far as 2007. It was invented by the motivation that CSS lacks certain features amongst which are variables (and nesting and loops and mixins etc.).
CSS variables are a quite recent addition to the CSS standard (The last call working draft seams to be from 2014). They didn't render SCSS variables useless, because you can do things to SCSS variables which you can't do with CSS variables (to my knowledge) like color calculations.
On the other hand you can do things with CSS variables that you can't do with SCSS variables like changing at runtime.
BTW: CSS variables are not the official jargon. They should be called custom properties. But everyone calls them variables.
Addendum 1
One difference I was not talking about. You can't change SCSS variables with JavaScript. CSS Custom Properties however can be accessed and changed with JS
Addendum 2
This article on CSS Tricks has a good overview: https://css-tricks.com/difference-between-types-of-css-variables/
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
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.
With Polymer I can include my CSS styles in the element definition simply by adding a <style> tag. What I would like to do though is to add a preprocessor to those styles. Something like https://autoprefixer.github.io/ would be great.
Is there a way to do so without an external CSS file?
Use a build step to extract inline resources to separate files - something like gulp-html-extract.
Once you have the source extracted, you can process it separately.
You would then use a tool like Vulcanize to re-inline your styles back into your main component.
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?
YES! its possible.
If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons
In your styles.scss file you would have to first import _bootstrap.scss:
#import "_bootstrap.scss";
Then below the import:
button { #extend .btn; }
**I might be mistaken, but if I get what you're trying to do, can't you just use the #extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.
To my knowledge, you have to use #import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.
Just as the accepted answer has shown this is possible with #import, however #import has been deprecated by sass
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
The #use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.