Can I assign one globally defined CSS variable to another locally define variable?
For example, the variable --dark has been globally defined as black.
Then, I want to be able to do:
:root {
--background-color: --dark
}
.light {
--background-color: white
}
div {
background-color: --background-color
}
So that by default, my div will have a black background. And when the class light is added to it, it will have a white background.
I need the 'default' --dark variable here because it is a theme variable.
You should assign as var(--dark)
:root {
--dark : black;
--background-color: var(--dark);
}
.light {
--background-color: white;
}
div {
height: 100px;
width: 100px;
background-color: var(--background-color);
}
<div class="light"></div>
<div></div>
Related
I'd like to use Sass to create a reusable HTML snippet with default values, but then make those values optionally customizable. Let's say I'm making a button and I set up some base SCSS to make the button red by default like so:
%button-shared {
$button-color: red;
td {
border-color: $button-color;
color: $button-color;
background-color: white;
text-decoration: none;
width: 50px;
height: 15px;
border-radius: 6px;
}
}
I use a variable because I want it set in two different places. In this example, I want a white button with a colored outline that matches colored text like so:
Now let's say I give my two buttons in HTML different classes, button-one and button-two. Now I'd like to assign that SCSS to my two buttons, so I extend %button-shared to those two HTML classes. Except, I'd also like button-one to be a different color from the default red:
.button-one {
$button-color: green;
#extend %cta-shared;
}
.button-two {
#extend %cta-shared;
}
Unfortunately, this implementation ends up with them both being red. How can I setup my SCSS to allow for easy overriding of of a variable?
Use mix-ins: https://sass-lang.com/documentation/at-rules/mixin
#mixin button-shared($button-color: red) {
td {
background-color: white;
border-color: $button-color;
color: $button-color;
text-decoration: none;
width: 50px;
height: 15px;
border-radius: 6px;
}
}
.button-one {
#include button-shared(green);
}
.button-two {
#include button-shared();
}
How i can do this?
// style.scss
$primary-color: #dc4545;
div{
background : $primary-color;
}
Try to do this:
div{
background : var(--primary-color)
}
Is this possible in any way?
You can define global variables on the :root:
:root {
--primary-color: #dc4545;
}
div {
background: var(--primary-color);
}
Edit: Or were you trying to mix and match?
$primary-color: #dc4545;
:root {
--primary-color: #{$primary-color};
}
div {
background: var(--primary-color);
}
First of all :root and html selector basically same thing but :root with higher specificity than html selector
html {
}
/*****exactly :root and html selector are same but with higher specifity(:root)*****/
:root {
--color-primary-light: #FF3366;
--color-primary-dark: #BA265D;
--bakcground-color: #fff;
--default-font-size: 16px;
--color: blue;
}
/****************How to implement***************/
.root-selector {
background-color: var(--background-color);
font-size: var(--default-font-size);
color: var(--color);
}
<div class="root-selector">
Thank you buddy
</div>
:root {
--color: blue;
}
div {
--color: green;
color: var(--color)
}
#alert {
--color: red;
color: var(--color)
}
<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>
What's my color too?
<p>color?</p>
</div>
In the above code, how can I access the global value of --color in div with id='alert'?
Or in other words is there any way in CSS to access the global variable like the :: (scope resolution operator) in c++??
You Can't do that with CSS.
If You'll repeat the declaration of the same variable, it'll use the locally declared variable.
See this-
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
Source: Example 5 CSSWG
This is a possibility
:root {
--color: blue;
}
div {
color: var(--color);
}
#alert {
color: var(--color);
}
<p>What's my color?</p>
<div style="--color:green">and me?</div>
<div id="alert" style="--color:red">
What's my color too?
<p>color?</p>
</div>
Or:
:root {
--color: blue;
}
div {
--color: green;
color: var(--color);
}
#alert {
--color: red;
color: var(--color);
}
<p>What's my color?</p>
<div>and me?</div>
<div id="alert">
What's my color too?
<p>color?</p>
</div>
CSS Custom variables are inheritable, that means when you define a variable in :root, it is applicable to all elements.
When you applied it to div it changed for all div and everything inside the div.
And because they have been inherited, their parent's/root's value can't be accessed.
Check out this pen for some trials.
One method hack to do is to make a copy of the variable and use it.
:root {
--color: blue;
--colorRoot: var(--color);
color: var(--color);
}
div {
--color: green;
color: var(--color);
}
#inside {
color: var(--colorRoot);
}
<div> I am inside a div.<br><span id="inside">I am inside</span></div>
I am ouuuuuutside
Pretty sure that's not you would like to do.
/* Site */
::-webkit-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::-moz-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::selection {
background-color: #highlightBackground;
color: #highlightColor;
}
I am using semantic-ui as css framework, and I have been overriding its values today. I came across with selection option, which is overridden by default, and I would like to set it as computer default. As some of you know, you can change selection color in macbooks, so I would like my users to use computer's default selection color.
So, what should I do? I tried inherit and transparent but they don't work.
The solution is to use the system color highlight for the background and highlighttext for the foreground.
Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!
The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
<div>This is a div in which you can make a selection</div>
Then we'll add the colors highlight and highlighttext to the end of the css (emulating our custom stylesheet) to show that the selection color is back to the default.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
/* overriding colors */
::-webkit-selection {
background-color: highlight; color: highlighttext;
}
::-moz-selection {
background-color: highlight; color: highlighttext;
}
::selection {
background-color: highlight; color: highlighttext;
}
<div>This is a div in which you can make a selection</div>
Disclaimer: these system colors are officially deprecated; there is no proper replacement yet though. Also, in Chrome it seems to reset the colors to slightly different ones than they have in the absence of any styles; I seem to have to do some more research.
I am using CSS Less for my project, I have a problem to write the following CSS into Less.
Here color is same for .btn and .header but how can I simplify using Less?
variable
#whiteColor: #fff;
CSS
.btn{
border: none;
color: #ffffff;
}
.header{
color:#fff;
}
I have written in the following way. Is there any way to write it in only one statement?
.btn{
border: none;
color: #whiteColor;
}
.header{
background:#whiteColor;
}
Assuming that the property to which the value needs to be assigned is the same (color), you can do it using a single statement by grouping selectors. Below is a sample snippet:
#whiteColor: #fff;
.btn{
border: none;
}
.btn,
.header{ /* selector grouping */
color: #whiteColor;
}
Note that you don't even need Less for the above if the color is not going to change often. I would assume this is the case because of how closely the variable name is coupled to the color and in that case you can use pure CSS like in the below snippet.
.btn {
border: none;
}
.btn,
.header { /* selector grouping */
color: #fff;
}
/* Just for demo */
body {
background: black;
}
<div class='btn'>Some button</div>
<div class='header'>Some header</div>
If the properties are different (one has white as its color while the other has it as background), then it cannot be simplified into a single line even while using Less.
You can use a parametric mixin and property name interpolation like in the below snippets but these only complicate the situation than simplify it.
/* If color is same but property is different */
#whiteColor: #fff;
.apply-white-color(#property){
&{
#{property}: #whiteColor;
}
}
.btn{
border: none;
.apply-white-color(color); /* the property to which white color should applied is passed as parameter */
}
.header{
.apply-white-color(background);
}
/* If property is same but color is different */
#whiteColor: #fff;
#redColor: #f00;
.apply-color(#value){
&{
color: #value;
}
}
.btn{
border: none;
.apply-color(#whiteColor); /* the color which should applied is passed as parameter */
}
.header{
.apply-color(#redColor);
}