Is there a way to override variables in SCSS without mixins or functions?
My setup looks like this:
Input:
$color: red !default;
selector {
color: $color;
}
$color: blue;
Output:
selector {
color: red;
}
I already tried to use !global but this does not work either.
I am not sure, if this is even possible in SCSS without using mixins.
You need to set the variable before it gets declared with !default.
To achieve the result you want your code needs to look like this:
$color: blue;
$color: red !default;
selector {
color: $color;
}
Here is some info about how !default works.
Related
Consider I have a long list of SASS variables in different .scss files like this:
$app-color-white: #ffffff;
$app-color-black: #000000;
What would be the most effective way to export these variables as vanilla CSS variables?
:root {
--app-color-white: #ffffff;
--app-color-black: #000000;
}
Maybe, there is a SASS-way or even some pre-processor?
I want my SASS framework to be also used in vanilla CSS projects.
This is now possible thanks to sass modules and the new sass:meta.module-variables() function: it
Returns all the variables defined in a module, as a map from variable names (without $) to the values of those variables.
For example
// _vars.scss
$color: red;
$font: Helvetica, sans-serif;
// style.scss
#use 'sass:meta';
#use 'vars';
:root {
#each $name, $value in meta.module-variables(vars) {
--#{$name}: #{$value};
}
}
Outputs
:root {
--color: red;
--font: Helvetica, sans-serif;
}
⚠️ Sass modules are currently only supported in Dart Sass
I think the best way to do this would be using something like a variable map;
E.g.
// sass variable map
$colors: (
primary: #FFBB00,
secondary: #0969A2
);
// ripped CSS4 vars out of color map
:root {
// each item in color map
#each $name, $color in $colors {
--color-#{$name}: $color;
}
}
Output:
:root {
--color-primary: #FFBB00;
--color-secondary: #0969A2;
}
Source: https://codepen.io/jakealbaugh/post/css4-variables-and-sass
I have a set of palettes for different themes like so:
$primary: red;
$secondary: blue;
.theme-2 { $primary: green; $secondary: yellow; }
//..
//some random scss file that has typography class names
.cool-text { color: $primary; }
Is it possible to make it so, whatever the class name applied to the container uses the variable palette colors defined for it?
Ex:
<div class="theme-2">
<p class="cool-text"> cool </p> // should be green
</div>
<p class="cool-text"> cool </p> //should be red
Because Sass variables are compiled before runtime, they cannot be context-sensitive, so the example you provided would not be possible.
Some helpful reading with alternate examples here:
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
And I'd read into native CSS variables, which can do exactly what you want and are gaining support in most browsers aside from IE/Edge:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
You can use !default here
check this running code snippet,with your html codepen
$primary: red !default;
$secondary:blue !default;
.cool-text { color: $primary; }
.theme-2 {
$primary: green;
$secondary: yellow;
.cool-text{
color: $primary;
}
}
With this if color is not set to anything ,it would take default red color if not whatever you set it would take that
Hope it helps
I don't know how to better name this topic
but idea is the following. I want to show different color for a component depends on a parent class.
for this project I use webpack, vue, vue-loader, sass.
I have a sass file this file contents all settings for pages what color should use for specific page
$colors: ".page-home" blue, ".page-about" green;
#each $i in $colors {
$page: nth($i, 1);
$color: nth($i, 2);
#{$page} .component_1, .component_2, .component_n {
color: $color;
}
}
I have a component is written as vue component
#import "colors";
.compoent_1 {
border:1px solid black
}
A issue is I have a lot of components and it very difficult to support the colors file in consistency. When I want to add a new component or remove an old one I always have to go to this file and edit it is annoying me
So how I see the solution is create a main file.
.page-home:blue;
.page-about: green;
I'd like write components in the following style
.component {
border:1px solid black;
color: $PAGE_COLOR;
}
and this code should generate
.page-home .component_1, .component_2, .component_n {
color: blue;
}
.page-about .component_1, .component_2, .component_n {
color: green;
}
thats all. thanks for any suggestion
I am declaring variable of same name in two files. I import them in a following order and found a conflict.
Modal.scss
$gray : #e1e1e1; // Imported first
Variable.scss
$gray : #999; // imported later
The expected behaviour is that the value of $gray be overwritten. However, I am getting the firstly imported value (#e1e1e1) instead of (#999) in CSS.
Am I doing the wrong thing declaring variable multiple times?
Apparently, Sass will take first variable declaration.
For example when you use Bootstrap in Sass, you have to declare all variables you want to override before you import Bootstrap.
// This will override the default $brand-primary in Bootstrap
$brand-primary: #000;
// Importing Bootstrap
#import 'bootstrap';
Quick notes on SCSS variables
When processed Sass will output the current variable value
$color: red;
.class-1 { color: $color; } // red
$color: blue;
.class-2 { color: $color; } // blue
You can use the !default flag to define default variables.
$color: red;
$color: blue !default; // only used if not defined earlier
.class-1 { color: $color; } // red
Inside function, mixins and selectors variables are local.
$color: red; // global
#mixin color {
$color: blue; // local
color: $color
}
.class-1 { color: $color; } // red (global)
.class-2 { #include color; } // blue (local)
.class-3 {
$color: green; // local
color: $color; // green (local)
}
.class-4 {
color: $color; // red (global)
}
You can use the !global flag to globalize variables.
$color: red; // global
#mixin color {
$color: blue !global; // global
color: $color
}
// as we are including color after printing class-1 the color is still red
.class-1 { color: $color; } // red
.class-2 { #include color; } // blue
// at this point the include in class-2 changed the color variable to blue
.class-3 { color: $color; } // blue
i think you should modified color name like light-gray: #e1e1e1; and dark-gray: #999;. this will help for solve your problem.
You should keep your variable names unique to reduce conflicts.
try:
$gray : #999 !important;
I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.
I am trying to create color palette in CSS that will be used through out my application.
For example:
.blue { color: #434544; }
.green { color: #G99933; }
I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:
.editor { background-color: #434544 }
I want to reference back to the .blue style instead of defining it here again. How can I do that?
UPDATE
I found the perfect solution for my question:
Chirpy -> http://chirpy.codeplex.com/
There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.
Here's what it looks like using (scss-flavored) SASS:
$blue: #434544;
$green: #G99933;
.blue { color: $blue; }
.green { color: $green; }
.editor { background-color: $blue }