I want to use relative colors in my project made with Nuxt.
When I add this line of code:
background-color: rgb(from var(--color) r g b / .5);
SASS throws this error:
SassError: Only 3 elements allowed, but 5 were passed.
Is there any way to bypass it?
You want to use rgba (not rgb) like this:
background-color: rgba(var(--color), 0.5);
EDIT
background-color: rgba(var(--color), 0.5) !important;
Related
Any reason why this isn't working?
:root {
--color-white: 0 0% 100%;
}
color: hsla(var(--color-white) 1);
I'm getting:
SCSS processing failed: file "_page.scss", line 5, col 16: Function hsla is missing argument $saturation.
I also tried
color: #{hsla(var(--color-white) 1)};
which still does not work.
Try like below. You need comma with hsla() using the old syntax
:root {
--color-white: 0, 0%, 100%;
}
.box {
color: hsla(#{var(--color-white), 1});
}
Or use the new syntax where you need / before the alpha
:root {
--color-white: 0 0% 100%;
}
.box {
color: hsl(#{var(--color-white) / 100%});
}
Reference: https://www.w3.org/TR/css-color-4/#the-hsl-notation
SASS attempts to compile the styles with a SASS-specific hsla() function. However, hsla() is also a native CSS function, so you can use string interpolation to bypass the SASS function.
:root {
--color-white: 0 0% 100%;
}
div {
/* This is valid CSS, but will fail in a scss compilation */
color: hsla(var(--color-white) 1);
/* This is valid scss, and will generate the CSS above */
color: #{'hsla(var(--color-white) 1)'};
}
Taken from this answer on SO.
hsla() takes four inputs and the punctuation needs to be accurate or none of it will work. No hash tags are needed:
--color: 0, 100%, 50%;
color: hsla(var(--color), 1);
This 100% works (pun intended).
Please, add commas between --color-white's percentages and after passing the var (before '1' in color).
This solution should work:
:root {
--color-white: 0, 0%, 100%;
}
color: hsla(var(--color-white), 1);
It looks like rgb() works without commas, but hsla() needs commas.
See here: http://codepen.io/Aleksgrunwald/pen/abpQQrr
I"m trying to use CSS custom properties in a rgba value. I am able to get the desired result in pure css, but when I test this out in codepen.io or my IDE that are both using scss, I am getting an error of: overloaded function `rgba` given wrong number of arguments . How can I incorporate this in SCSS
Here is a codepen that shows the error: https://codepen.io/tmocodes/pen/xxVdMEq?editors=1100
The below snippet works because it is not using SCSS.
:root {
--color-primary: 29 4 247;
--lighten: 10%;
}
#element {
background-color: rgba(var(--color-primary) / var(--lighten));
color: rgb(var(--color-primary));
}
<h1 id="element">Using CSS Custom Properities with opacity</h1>
To incorporate modern comma-free CSS color syntax with SCSS, I've used this workaround.
The reason this doesn't work is that it conflicts with the Sass rgb/rgba function. You can uppercase one or more letters to make Sass ignore it (being case sensitive). CodePen demo.
$color-primary: 29 4 247;
$color-secondary: 247 4 4;
$lighten: 10%;
#element {
background-color: Rgba($color-primary / $lighten);
color: Rgb($color-primary);
}
#element-2 {
background-color: Rgba($color-secondary / $lighten);
color: Rgb($color-secondary);
}
SCSS preprocessor has to computed the vales before it can be assigned to the css variables.
Following approach might give you hint to approach the solution you are looking for.
rgba require 4 parameters
rgb require 3 parameters.
$blue: rgb(29, 4, 247);
$red: rgb(29, 4, 247);
$lighten: 10%;
:root {
--color-primary: #{blue};
--color-secondary: #{red};
--lighten: #{lighten};
}
#element {
background-color: lighten($blue, $lighten);
color: $blue;
}
#element-2 {
background-color: lighten($red, $lighten);
color: $red;
}
I created the following CodePen, that gives the idea of how to combine scss with css variables.
I add css variable to root because i want to change it dynamically by using JS
#root {
--primary-color: #4c5b73;
}
$primary-color: var(--primary-color) !default;
.my-component {
background-color: transparentize($primary-color, 0.85);
}
I want to use the Basic scss function transparentize
or lighter or darker
But i got this error
Argument `$color` of `transparentize($color, $amount)` must be a color
How can i tell that this is a color type?
Update
I should do this more earlier
https://codepen.io/colton123/pen/bGVbRjP
Instead of declaring the : root variable first, makes the code like this one.
Your code flow is not right. It may gonna help you. You should study this article
$primary-color: #4c5b73;
: root{
--primary-color: #{$primary-color};
}
.my-component {
background-color: transparentize($primary-color, 0.85);
}
You could just add the alpha channel in regular CSS if you define the color using decimal RGB values instead of a hex code:
:root {
--primary-color: 76, 91, 7;
}
body {
background-color: white;
}
.my-component {
background-color: rgba(var(--primary-color), 0.15);
}
<div class="my-component">
Test
</div>
You would use getComputedStyle and getPropertyValue
this solution should get you what you need. :)
Say you have the CSS custom property for a color:
--color: 255,0,0
And you want to mix it specially every time with rgb or rgba as the need requires. This is valid CSS:
rgba(var(--color), .3)
...but Sass explodes. I've been trying to see if I could write a mixin or something but I can't figure out how to get around Sass's insistence on using it's own color functions even when they are not necessary.
Got it! This is a bit hacky but this allows you to create a custom function that utilizes the rgba() function with CSS custom properties (as allowed in the spec):
#function swatch($swatch-color, $swatch-alpha:1) {
#return unquote("rgba(var(--#{$swatch-color}), #{$swatch-alpha})");
}
:root {
--green: 0,255,0;
}
.green { color: swatch(green, .1); }
Found the key to the solution in a Sass bug report. This only works because the unquoting and interpolation bypass the default rgba() function.
Perhaps using interpolation rgba(#{--color}, .3)?
Another temporary workaround for this is to use RGB values only in your variables like you are already:
--color: 255, 255, 255;
Then if you use the RGB or RGBA function with capitals, SASS will ignore it and plain CSS is able to parse it. You can then adjust the opacity!
RGB(var(--color));
RGBA(var(--color), .3);
rgba(var(--color), .3) is not valid:
div {
width: 50px;
height: 20px;
outline: 1px dashed black;
}
:root {
--color: red;
}
#correct {
background: var(--color);
}
#incorrect {
background: rgba(var(--color), .3);
}
<div id="correct"></div>
<div id="incorrect"></div>
I'm setting up a CSS for a website where all the links, in :hover state, are darker than in normal state.
I'm using Sass/Compass so I looked to the darken Sass method, here : http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method
Here's the use : darken($color, $amount)
My question is : how can I make this "automatic" to set all my <a> elements to be 80% darker ?
What I'm trying to do is (Sass syntax) :
a
background: $blue
&:hover
background: darken(this element background-color, 80%)
What's the best solution to do this ?
I thought about this.
The only way I found is by creating a mixin :
#mixin setBgColorAndHover($baseColor)
background-color: $baseColor
&:hover
background-color: darken($baseColor, 5%)
And then :
.button
+setBgColorAndHover($green) // as $green is a color variable I use.
Not the best, but that will do the job :)
By now, better to use a filter in native CSS:
.button:hover {
filter: brightness(85%);
}