[英]How to store scss variables to css variables using suitable function in scss?
I have constants.scss
file with many variables:我有很多变量的
constants.scss
文件:
// TYPOGRAPHY
$main-font: "Rubik", monospace, "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
$number-font: "Montserrat", Helvetica, Arial, serif, "Roboto Mono", monospace;
// Z-LAYER
$layer-1: 1;
$layer-2: 2;
$layer-3: 3;
$layer-4: 4;
$layer-5: 5;
// COLOR PALETTE
$cyan: #39d0ff;
$powderblue: #bae0ff;
$lightblue: #7fc9ff;
$blue: #1976D2;
$warmblue: #7491ff;
$coldblue: #8ccade;
$darkblue: #1669bb;
$accentblue: #1E88E5;
$brightred: #DD0031;
$darkred: #C3002F;
$white: #FFFFFF;
$offwhite: #FAFAFA;
$tangerine: #DDA302;
$darkgoldenrod: #C3A300;
$backgroundgray: #F1F1F1;
$superlightgray: #F2F2F2;
$lightgray: #DBDBDB;
$lightboxgray: #EBEBEB;
$mist: #ECEFF1;
$mediumgray: #6E6E6E;
$darkgray: #444444;
$deepgray: #333333;
$black: #0A1014;
$orange: #FF9800;
$darkorange: #940;
$anti-pattern: $brightred;
// API & CODE COLORS
$amber-200: #AA3000;
$amber-700: #FFA000;
$blue-400: #42A5F5;
$blue-500: #2196F3;
$blue-600: #1E88E5;
$blue-800: #1565C0;
$blue-900: #0D47A1;
$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;
$codegreen: #17ff0b;
$green-500: #4CAF50;
$green-800: #2E7D32;
$light-green-600: #7CB342;
$pink-600: #D81B60;
$purple-600: #8E24AA;
$teal-500: #009688;
$lightgrey: #F5F6F7;
// STATE COLORS
$focus-outline-ondark: rgba($white, 0.8);
$focus-outline-onlight: $accentblue;
// GRADIENTS
$bluegradient: linear-gradient(145deg,$blue-900,$blue-400);
$redgradient: linear-gradient(145deg,$darkred,$brightred);
// API LABEL COLOR AND SYMBOLS MAP
$api-symbols: (
all: (
content: ' ',
background: $white
),
class: (
content: 'C',
background: $blue-500
),
const: (
content: 'K',
background: $mediumgray
),
decorator: (
content: '@',
background: $blue-800
),
directive: (
content: 'D',
background: $pink-600
),
enum: (
content: 'E',
background: $amber-700
),
function: (
content: 'F',
background: $green-500
),
interface: (
content: 'I',
background: $teal-500
),
let: (
content: 'K',
background: $mediumgray
),
ngmodule: (
content: 'M',
background: $darkorange
),
package: (
content: 'Pk',
background: $purple-600
),
pipe: (
content: 'P',
background: $blue-grey-600
),
element: (
content: 'El',
background: $amber-200
),
type-alias: (
content: 'T',
background: $light-green-600
),
var: (
content: 'K',
background: $mediumgray
),
);
I want to store this variables in css variables using @each
or any suitable function of scss.我想使用
@each
或任何合适的 scss 函数将此变量存储在 css 变量中。
So I try to do:所以我尝试这样做:
@use '../../constants';
:root {
border:1px solid constants.$cyan; // works
@each $color, $value in constants {
--#{$color}: #{$value}; // not works.
}
}
I get in the html (inspect):我进入了 html(检查):
:root {
border: 1px solid #39d0ff;
--constants: ;
}
What I expected is:我的预期是:
:root {
border: 1px solid #39d0ff;
--main-font: "Rubik", monospace, "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
--number-font: "Montserrat", Helvetica, Arial, serif, "Roboto Mono", monospace;
// Z-LAYER
--layer-1: 1;
--layer-2: 2;
--layer-3: 3;
....
}
Maybe I don't use correctly in the function.也许我在函数中没有正确使用。 any idea what I need to do to fix that?
知道我需要做什么来解决这个问题吗?
in your sass file, 'constants' refers to the entire constants.scss
file/module.在您的 sass 文件中,'constants' 是指整个
constants.scss
文件/模块。 @each
works on lists or maps, so you could do something like this in constants.scss
: @each
适用于列表或地图,因此您可以在constants.scss
:
// TYPOGRAPHY
$main-font: "Rubik", monospace, "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
$number-font: "Montserrat", Helvetica, Arial, serif, "Roboto Mono", monospace;
$fonts: (
main-font: $main-font,
number-font: $number-font,
);
and then in your other file, something like this:然后在你的另一个文件中,是这样的:
@use '../../constants';
:root {
border:1px solid constants.$cyan;
@each $font, $value in constants.$fonts {
--#{$font}: #{$value};
}
}
And then something similar with colors, layers etc.然后是颜色、图层等类似的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.