Using scss variable inside css variable

debugcn 投稿 Dev

Scipion

Here is the code I am trying

@import "~variables";

:root
{
  --color-primary: map-get($colors, blue);
}

button {
  background: var(--color-primary);
}

in variables I have

$colors: (
        black : #000000,
        white : #FFFFFF,
        blue: : #888888
}

Unfortunately it doesn't work, my buttons aren't blue. As scss is precompiled, I thought that would just work nicely.

denns

you need to escape that scss function like so:

$colors: (
        'black' : #000000,
        'white' : #FFFFFF,
        'blue' : #888888
);

:root {
  --blue: #{map-get($colors, 'blue')}
}

body {
  color: var(--blue);
}

Update: it's basically string interpolation that is needed.

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Using SCSS variable inside a variable

分類Dev

Using variable inside an object in HTML

分類Dev

trouble using variable inside getElementById

分類Dev

SCSS variable class name

分類Dev

SCSS variable class name

分類Dev

SCSS variable class name

分類Dev

Referencing a sass/scss variable on the fly

分類Dev

Change Variable colors if else in scss

分類Dev

How to resolve a variable inside a variable?

分類Dev

Variable string inside variable name

分類Dev

Scope of variable inside for loop

分類Dev

Define a variable inside a function

分類Dev

Accessing user password variable using this instance inside another function

分類Dev

Unused variable warning even when explicitly using it inside IF statement

分類Dev

How can we set a variable inside a structure in nginx using lua

分類Dev

Calling value inside a Userform's Control using a variable

分類Dev

Using a variable template inside inline constexpr function without exposing the variable template?

分類Dev

create a php variable inside a php variable

分類Dev

Python: Variable inside a Variable-Name

分類Dev

Java UIMA: Regex Variable inside Regex Variable?

分類Dev

Variable Anchor tags inside a variable post Wordpress

分類Dev

Scrollposition as a variable in css?

分類Dev

Accessing global variable in css

分類Dev

Variable Inside Define Template in Golang

分類Dev

Expand variable inside single quotes

分類Dev

Variable inside function in angular 2

分類Dev

Cast declaration variable inside for of loop

分類Dev

TabBarView with variable height inside a ListView

分類Dev

Update variable inside of set state

Related 関連記事

記事