質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

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

CSS

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

Q&A

1回答

3008閲覧

postcssの変数の書き方

退会済みユーザー

退会済みユーザー

総合スコア0

Sass

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

CSS

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

0グッド

0クリップ

投稿2016/07/06 08:05

編集2022/01/12 10:55

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Custom media queriesで可能です。
以下のpluginを入れて下さい。

postcss-custom-media

投稿2016/07/06 10:50

編集2016/07/06 10:52
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/06 11:07

確かにこれがあるのは知っています。 これが限界なのですかね。 >>> @custom-media --small-viewport (max-width: 30em); @media (--small-viewport) { /* styles for small viewport */ } _______________ 下記のようにできるとだいぶ書く量が減るのですが、変数はなんでも好きなように好きなところで使えるわけではないのですね。 おそらくsassでも同じですね。 --breakpoint-pc-min: @media (min-width:922px); すると下記のようにグラデーションの一部を変数にするなど、絶対に不可能ですね。 --color-foundation: to left bottom , rgba(153,255,211,.66), rgba(189,255,226,.66);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問