I am trying out CSS variables and I would like to use RGB colours.
Here's my current CSS Variable:
--primary: rgb(112, 199, 255);
So this works absolutely fine when using the following code:
color: var(--primary)
But some paragraphs also use this primary colour and I would like to give them a slight transparency. Now I could replace that and create another CSS Variable like so:
--primary: rgb(112, 199, 255);
--primary-alpha: rgba(112, 199, 255, 0.7);
But that just feels messy and confusing having two primary colours and what If I use a few different transparencies. I could also use the following CSS Variable:
--primary: 112, 199, 255;
--alpha: 0.7;
and output it using the following code:
color: rgba(var(--white), var(--alpha));
This works as I want and I personally think is a nicer way of doing it but my colours don't preview in my code editor see image.
Look at the --dark variable, it won't show the colour using this code.
Ideally, I would like to use:
--primary: rgb(112, 199, 255);
and output it like so:
color: var(--white), var(--alpha);
But it won't work?
Assuming you're using atom-pigment. The color detection works within comments as well. So you could perhaps add the actual rgb value in the comments only for reference & use the variable as usual. Like so:
--dark: 18, 38, 51 /* this color is - rgb(18, 38, 51) */
Related
I am working on an app that many different clients will use, but the "themes" can't be shared between clients because their color schemes are considered proprietary and confidential even though I'm aware that sounds absurd.
Right now, the colors are defined in the main App.vue component without the <style> instead of <style scoped>, and then downstream from there the components are all scoped.
The way it currently works is that I'm using CSS variables to define the colors and gradients.
I'm more or less looking for a solution that could do something like this pseudo-code:
const clientName = import.meta.env.CLIENT_NAME
if (clientName === 'abc') {
:root {
--background-color: #f3f3f3;
--default-font-color: #000000;
--primary: #8c4799;
--secondary: #d22630;
--gradient-primary: rgba(140, 71, 153, 0.2) 4.55%;
--gradient-secondary: rgba(210, 38, 48, 0.02) 105.67%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #f2f2f2;
}
} else if (clientName === 'def') {
--background-color: #0c0c0c;
--default-font-color: #ffffff;
--primary: #c1fc3d;
--secondary: #d22630;
--gradient-primary: rgba(110, 71, 153, 0.2) 3%;
--gradient-secondary: rgba(190, 38, 48, 0.02) 50%;
--failure-color: #b94527;
--badge1: #419bbe;
--badge1text: #ffffff;
--c-white: #ffffff;
}
Keeping in mind that all of the downstream components use these variables and it's a pretty large app.
I'm using Vite for bundling if that makes a difference.
You can create one .css file exporting these css variables for every client. Then, on your main.js entry point, you can import the file corresponding to that client:
const clientName = import.meta.env.CLIENT_NAME
import `#/assets/themes/${clientName}.css`;
When you assign a CSS var() variable to an Sass variable like this:
--color: #FFF;
$color: var(--color);
This will result in $color holding the var(--color) as a value. Is there a way so it would hold the actual CSS #FFF value? So $color would save the #FFF instead of var(--color)?
This would be great so you can use the css variables in more complex functions and media queries where var() isn't allowed.
Not possible directly, but an alternative is to keep the rgb or hsl value instead of a hex value.
--color: 129, 19, 29;
$color: rgb(var(--color));
You could specify 2 variables for each like below, to have both options available.
--color: #554784;
--color-rgb: 129, 19, 29;
Or just always use the rgb(a) notation
color: rgb(var(--color));
I have some variables to easily define the color of my webapp, something like this:
:root {
/*Variables for color style*/
--main-bg-color: rgba(243, 243, 243, .7) !important;
}
The problem is that I.E. is not handling it. I solved it using preprocessor varialbes like this:
$main-bg-color: #fff
However, preprocessor variables can't handle rgba colors... Is there any way to store my rgba (without using one variable for each r, g, b, and alpha channel)?
rgba not working in IE 6 & 7 (fixed in IE 8).
Try this:
:root {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000);
zoom: 1;
}
This may help you.
I am attempting to use SASS for the first time on my next project (Pomodoro Clock). To get started I just wanted to declare my color variables and set a background color. When I try to apply the styling I get this error:
Invalid CSS after "...(35, 61, 77, 1)": expected expression (e.g. 1px,
bold), was ";"
My code is below.
/*All variables declared*/
$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: $yankeesBlue;
}
I know this is a super simple question that shouldn't need this forum to answer but I have sincerely Googled and asked for help elsewhere without any luck. Thank you for your help.
Are you using sass or scss ? I dont think you are allowed to use ';' in .sass files.
Got it from here : Sass Invalid CSS Error: "expected expression"
And double checked : http://sass-lang.com/guide
In Codepen, change your preprocessor from Sass to SCSS.
See this for more info on the difference between Sass and SCSS:
What's the difference between SCSS and Sass?
I'm currently using
::selection {
background: rgba(3, 35, 75, .7);
}
But that only changes the color/opacity when I've selected a text or something. It goes to the default color/opacity on blank spaces etc when I press CTRL+A.
How do I change this?
Example:
Example image
Note that the gray selection is blue, it just acts as I've tabbed out.
I don't know if it is good practice, but it will work with * selector.
*::selection {
background: rgba(3, 35, 75, .7);
}
try replacing all the numbers, the last one is the important one to replace.