質問編集履歴

2 ソースを一部変更

退会済みユーザー

退会済みユーザー

2016/07/06 20:08  投稿

postcssの変数の書き方
postcssで変数を使ったのですが、下記のように変数を定義していった所、
エラーがでます。
```ここに言語を入力
:root {
   /* color */
   --color-primary: #d1fb3c;
   --color-foundation: to left bottom , rgba(153,255,211,.66), rgba(0,255,145,.66) 15%, rgba(115,255,194,.66) 33%, rgba(189,255,226,.66) 49%, rgba(115,255,194,.66) 67%, rgba(0,255,145,.66) 84%, rgba(189,255,226,.66);
  --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
```
  • CSS

    8449 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    401 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

1 その後 下記のエラーが出るものの、下記の部分だけはトランスパイルできていることが分かりました。

退会済みユーザー

退会済みユーザー

2016/07/06 18:33  投稿

postcssの変数の書き方
postcssで変数を使ったのですが、下記のように変数を定義していった所、
エラーがでます。
```ここに言語を入力
:root {
   /* color */
   --color-primary: #d1fb3c;
   --color-foundation: to left bottom , rgba(153,255,211,.66), rgba(0,255,145,.66) 15%, rgba(115,255,194,.66) 33%, rgba(189,255,226,.66) 49%, rgba(115,255,194,.66) 67%, rgba(0,255,145,.66) 84%, 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  
```
  • CSS

    8449 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Sass

    401 questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る