So i have a map of colors in sass which goes like
$form-option-colors: (
1: rgba(242,218,177,1),
2: rgba(222,186,133,1),
3: rgba(255,139,107,1),
4: rgba(237,116,83,1),
5: rgba(245,98,140,1),
6: rgba(148,61,112,1),
7: rgba(49,127,163,1),
8: rgba(39,101,130,1)
);
Now i wanna pass each one of these colors to a different div. I've tried to use a #for loop in sass but it keeps throwing me Compilation Errors.
This the #for loop code:
#for $i from 1 through 8 {
$color: map.get($form-option-colors, $i);
.option-#{$i} {
color: $color;
}
}
Keep in mind that i have 8 different .option containers which im iterating through
How can i make this work properly?
You are using the module-function map.get() without importing said module.
#use "sass:list";
#use "sass:map";
$form-option-colors: (
"1": rgb(242, 218, 177),
"2": rgb(222, 186, 133),
"3": rgb(255, 139, 107),
"4": rgb(237, 116, 83),
"5": rgb(245, 98, 140),
"6": rgb(148, 61, 112),
"7": rgb(49, 127, 163),
"8": rgb(39, 101, 130)
);
#for $i from 1 through list.length($form-option-colors) {
.option-#{$i} {
color: list.nth(map.values($form-option-colors), $i);
}
}
You can avoid having to import the module first by calling functions by their global name instead.
map.get() //module
map-get() //global
Though I'd discourage you from doing so, since Sass is going to deprecate the global functions in the future.
Also make sure you are running Dart-Sass.
Got it fixed by importing the module. Thanks!
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`;
I'm trying to apply certain rules to specific pages on WordPress. I'm trying to target the page class/ID and applying the rules in one line instead of multiple separate pages rules. I'm separating the classes by comma, but it seems to not work, what am doing wrong/is it possible ?
.page-id-62, .page-id-63, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52);
}
Just for knowledge when you select multiple selectors is the space required ?
Cheers to all.
Did you mean multiple selector .absolute-footer.dark element in page/post ID 62, 63, 64,... Here is working code:
.page-id-62 .absolute-footer.dark, .page-id-63 .absolute-footer.dark, .page-id-64 .absolute-footer.dark {
color: rgba(66, 66, 66, 0.52)!important; /* !important just in case */
}
Yes, it's possible. you need to add .absolute-footer.dark after each page id class
.page-id-62 .absolute-footer.dark,
.page-id-63 .absolute-footer.dark,
.page-id-64 .absolute-footer.dark
{
color: rgba(66, 66, 66, 0.52);
}
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) */
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?
This question already has an answer here:
Why does Sass change the format of my colors?
(1 answer)
Closed 7 years ago.
I'm currently writing a mixin to easily add multiple fonts in one line. In the mixin I write all the weights I want to use like this:
$font-weights: (
"hairline": 100,
"thin": 200,
"light": 300,
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700,
"heavy": 800,
"black": 900,
);
$main-font: "Lato";
#include font-list($main-font,Hairline Thin Light Regular Medium SemiBold Bold Heavy Black, normal, $font-weights);
The last weight in the list of weights given in the #include is "black", all the links go well, but the mixin I use gives an error on the last value, because it in some way converts "black" automatically before using already to #000000.
Is there any way to make Sass not do this?
the Mixin(s):
#mixin font-include($name, $file, $weight, $type) {
#include font-face("#{$name}", font-files("#{$file}.woff", "#{$file}.ttf"), "#{$file}.eot", $weight, $type);
}
#mixin font-list($name,$weights,$type,$font-weight){
#for $i from 1 through length($weights) {
#include font-include($name,#{$name}-#{nth($weights,$i)},map-get($font-weight,#{to-lower-case(nth($weights,$i))}),$type);
}
}
The error given by Compass is:
$string: #000000 is not a string for `to-lower-case'
Fixed it using unquote in the mixin on all weights.
(And added functionality for Italic fonts).
#mixin font-list($name,$weights,$type,$font-weight){
$italic: '';
#if $type == 'italic'{
$italic: 'Italic';
}
#for $i from 1 through length($weights) {
$weight: unquote("#{nth($weights,$i)}");
#include font-include($name,#{$name}-#{nth($weights,$i)}#{$italic},map-get($font-weight,#{to-lower-case($weight)}),$type);
}
}