postcssで変数を使ったのですが、下記のように変数を定義していった所、
エラーがでます。
:root { /* color */ --color-primary: #d1fb3c; --color-foundation: to left bottom , rgba(153,255,211,.66), rgba(189,255,226,.66); /* breakpoint */ --breakpoint-mobile: 320px; --breakpoint-tablet: 768px; --breakpoint-pc: 768px; --breakpoint-mobile: @media (max-width:320px); --breakpoint-tablet: @media (max-width:768px); --breakpoint-pc-max: @media (max-width:921px); --breakpoint-pc-min: @media (min-width:922px); } .logo { color: var(--color-primary); }
調べてみると、postcssの変数は値にしか使えないという情報を見たのですが、
sassの$のように定義したものはどんな形でも使えるということはないのでしょうか?
定義したものをどこでもそのまま代入してくれると
--breakpoint-pc-min: @media (min-width:922px);
のような使い方ができて大変楽なのですが、プラグインなどで何とかならないのでしょうか?
あまり情報がないのですが、下記の書き方であっていますよね。
.logo { color: var(--color-primary); }
・
その後
下記のエラーが出るものの、下記の部分だけはトランスパイルできていることが分かりました。
.logo {
color: var(--color-primary);
}
postcss-custom-propertiesというプラグインもインストールしてみましたがエラーは変わりませんでした。
このエラーは無視してもよいのでしょうか?
src-before/layout/_header.css 22:1 ‼ variable '--color-primary' is undefined and used without a fallback [postcss-custom-properties] [18:17:00] gulp-postcss: layout\_header.css postcss-custom-properties: C:\Users\h\Desktop\images\gulp-folder\postcss\src-before\layout\_header.css:22:1: variable '--color-primary' is undefined and used without a fallback postcss-custom-properties: C:\Users\h\Desktop\images\gulp-folder\postcss\src-before\layout\_header.css:22:1: variable '--color-primary' is undefined and used without a fallback
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/07/06 11:07