Sass variable change to css variable? - css

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>

Related

How to declare two classes for element with scss

I have this scss code:
button.green{
background-color: $green;
.current {
color: $white;
}
}
I want to apply two classes to my button <button class="green current"></button> but my scss code just does not work. How would you fix that in a proper scss manner?
Also tried that with no luck:
button {
.green{
background-color: $green;
}
& .current {
color: $white;
}
}
Nearly correct, missing "&" in your nesting to connect button.green and .current.
The css output of your scss is:
button.green > .current
meaning, you style an element "current" within its parent "button.green".
Correct:
button.green{
background-color: $green;
&.current {
color: $white;
}
}
Which outputs:
button.green.current
.green.current {
background-color: $green;
color: $white;
}
This will apply both class!!

CSS: Can you refer to a class within a class?

Let's say I have this class:
.dark-theme {
background-color: black;
}
Can I refer to it within my css file? Something like ...
.some-class {
dark-theme;
padding: 5px;
}
a {
dark-theme;
color: white;
}
I have two solutions to accomplish this.
Solution 1:
Use css variables.
(Not really doing what you asked for but good to know if you're not using any preprocessors)
:root {
--color-bg-dark: black;
}
.some-class {
background-color: var(--color-bg-dark);
}
Solution 2:
Use sass which is a css preprocessor and put your reusable rules in a mixin.
#mixin applyDarkTheme {
background-color: black;
color: white;
// Some other rules
}
.some-class {
#include applyDarkTheme;
}

Bootstrap classes inside a defined class

Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}

Accessing global variable in css

: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.

Compass (SASS) rule with pseudo class

Is it possible to generate css rule for element for normal state and some other pseudo state like this:
.heading-link, .heading-link:hover {
color: red;
}
with
.heading-link {
color: $state-info-text;
&:hover {
color: $state-info-text;
}
}
I got
.heading-link {
color: #538DA7;
}
.heading-link:hover {
color: #538DA7;
}
What is not as expected, plus I have to write rule for color twice.
You can use the parent selector (&) by itself, in addition to other selectors inside nested blocks.
DEMO
$state-info-text: #538DA7;
.heading-link {
&, &:hover {
color: $state-info-text;
}
}
Compiles to
.heading-link, .heading-link:hover {
color: #538DA7;
}
Yes. You can use Sass's built in #extend function for this.
$state-info-text: red;
.heading-link {
color: $state-info-text;
&:hover {
#extend .heading-link;
}
}
Gives the output:
.heading-link, .heading-link:hover {
color: red;
}

Resources