2017-09-29 1 views
1

CSSファイルでプロパティ/ env-variableを使用する可能性があります。私のCSSファイルで 私は一部、次のしている:CSSファイルのプロパティまたは変数

background: #F6F6F6 url("http://localhost:3000/images/cropped_logo_baga_black.png") no-repeat center; 

を、今私は、事前にこのよう

background: #F6F6F6 url("${BASE_URL}/images/cropped_logo_baga_black.png") no-repeat center; 

感謝をSTHを行うことができるように任意の外部設定ファイルのベースURLを持つようにしたいですhelp

+1

[しかし、それはそこになってきた](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)。今のところ[Sass](http://sass-lang.com/)で変数を使用することができます。 – kamyl

答えて

0

いいえ、実際にCSSに変数を設定する方法はありません。

ただし、attr()関数を(誤って)使用することができます。ここ

a:after { 
    content: " (" attr(href) ")"; 
} 

さらに詳しい情報: サス(http://sass-lang.com/)またはLess.js(http://lesscss.org/):https://www.w3schools.com/cssref/func_attr.asp

そうでない場合は、次のようなCSSプリプロセッサを見てみたいことがあります。ここでは、様々なプリプロセッサに

さらに詳しい情報:https://www.sitepoint.com/6-current-options-css-preprocessors/

1

はい、あなたはそれを行うために、CSS、「VAR」で使用することができます。

:root { 
    --base-url: http://localhost:3000; 
} 
.yourclass{ 
    background: #F6F6F6 url("var(--base-url)/images/cropped_logo_baga_black.png") no-repeat center; 
} 

MOZのDEV:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

は、私が使用することができます、純粋なCSSにはない非常にまだhttps://caniuse.com/#search=var

+0

mozilla.com:「これは実験的な技術です」と、現在は利用できません。ニースの将来の機能! – Rednael

+0

現在よく使われているすべてのブラウザで完璧に動作します;)表示方法: https://caniuse.com/#search=var – episch

+0

Trueですが、「使用方法」タブも考慮してください。そこでは、現在使用されているIE(duh)、Edge、Androidなどのブラウザのどれも実際にそれをサポートしていないことがわかります。たとえば、Androidで表示されたWebサイトなどでこれを使用すると、望みどおりにレンダリングされないことがあります。 – Rednael

関連する問題