I'm currently trying to do a mutliple theme design system with bulma as a base.
But i'm currently struggling with adding a multiple theme system.
I added this in my customstyle scss file but it doesn't seems to work
#charset "utf-8";
:root {
--primary: red;
--secondary: #068295;
}
body[class="light"] {
--primary: #F7A800;
--secondary: #068295;
}
body[class="dark"] {
--primary: blue;
--secondary: #068295;
}
$primary: var(--primary); // this works
$background: blue;
$text-strong: red;
$secondary: #8BC91D; // this works but without theming
// $secondary: var(--secondary); // this doesn't work
$secondary-invert: findColorInvert($secondary) !default;
$custom-colors: (
"secondary":($secondary, $secondary-invert),
);
#import "../node_modules/bulma/sass/utilities/_all.sass";
#import "../node_modules/bulma/sass/base/_all.sass";
#import "../node_modules/bulma/sass/elements/button.sass";
when I run the node sass command to generate the css file
i can see the is-secondary properties generated when i don't use the variable but when i use a variable to define my $secondary variable the is-secondary properties are not generated
Related
I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.
I tried to include constants.css at the html file and doesn't work. I tried both #import url("constants.css") and #import "constants.css".
constants.css
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
nav.component.css
#import url("../../../constants.css");
a.logo {
color: var(--secondary-color);
}
I expected my logo text to be yellow but it's just default black.
You've forget to declare your variable in your css file where you want to use global variable:
#value --secondary-color from "here should be your address";
a.logo {
color: var(--secondary-color);
}
Let me show an example:
shared.css:
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
and in main.css you should write #value --secondary-color like this
#value --secondary-color from "./shared.css";
.background {
background-color: var(--secondary-color);
}
And do not forget to include your css files:
<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
Do not forget that order of declaration of stylesheets does matter.
My problem has been the import not working at all because it's Angular thing. I have to import my constant into the main style.css and importing in individual css files doesn't work at all.
The right answer of this link is the answer.
Angular 6 - Less CSS' import is not working anymore
How to use CSS variable in global CSS file
Just check style.css file in stackblitz
https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css
in the global css file, styles.css, I have this code:
import ...
:root {
--main-color: #3f51b5;
}
it declares a css variable, "main-color"
then in the child component css file, I can use the variable directly
#component-body {
background: var(--main-color);
}
In the global style.css file, define custom properties in a :root selector.
Global variables in CSS will enable us to define theme variables such that multiple components can use the same.
Here you go:
app/style.css
:root {
--primary-color: #fff;
--background-color: #e5e5e5;
--text-color: #2d2d2d;
}
To define a CSS custom property,prefix the property with two '--' like --text-color:#2d2d2d.
Now we can reference the variable in other CSS files.To use a custom property, use the var keyword to pass in a reference to the custom property.
app/header/header.component.css
:host {
background-color: var(--primary-color);
color: var(--text-color);
}
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