CSSでグローバル変数を定義する方法

Question

グローバル変数を1つのCSSファイルで定義し、他のCSSファイルの変数を使用したいとします。

これは可能ですか？

いるglobal.css：

:root { 
    --main-color: #192100; 
    --main-background: #89b66b; 
} 

html, body { 
    min-height: 100%; 
    width: 100%; 
    font-family: Arial; 
    color: var(--main-color); 
} 

SomeFile.css：

.some-rule { 
    display: table; 
    border-radius: 12px; 
    border: 4px solid var(--main-color); 
    padding-left: 10px; 
    padding-right: 10px; 
    color: var(--main-color); 
} 

Htmlの：（いるglobal.cssはSomeFile.css前に参照されている場合）

<link href="Global.css" rel="stylesheet" type="text/css" /> 
<link href="SomeFile.css" rel="stylesheet" type="text/css" /> 

Answer 1

CSS自体は変数を使用しません。しかし、あなたはSASSやLESSのような別の言語を使うことができます

Answer 2

これはCSSで行うことはできません。 LessまたはSassのようなCSSプリプロセッサを試してみてください。

less.css sharing variables across files

SASS - use variables across multiple files