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

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

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

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

Q&A

解決済

1回答

215閲覧

sassのmap型について

mana_mana419

総合スコア27

Sass

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

0グッド

0クリップ

投稿2019/06/29 13:36

編集2019/06/29 13:48

sassを勉強している者です。

sassのMap型について質問があります。
勉強中に以下のようなコードがありました。

sass

1// Map型を使って定義 2$sns-colors: ( 3 twitter: #1b95e0, 4 facebook: #3b5998, 5 googleplus: #dc4e41, 6); 7 8// SNSアイコン 9.sns { 10 &__btn { 11 background-repeat: no-repeat; 12 // @each で処理を繰り返す 13 @each $key, $value in $sns-colors { 14 &.-#{$key} { 15 background-image: url(/img/icon_#{$key}.png); 16 background-color: $value; 17 } 18 } 19 } 20}

流れは理解できましたし、これを真似てやりたいこともできました。
ただ勉強している時に説明がなかったためここで確認したく質問させていただきました。

それは@eachの後に$key,$valueと2つ変数を準備してMap型の$sns-colorsから値をもらっているところです。
Map型の場合、変数を2つ準備したらキー、と値をそれぞれもらえるという認識であっているでしょうか?

上手く文に出来ず伝えづらくすいません。
もしわかる方いらっしゃいましたら教えていただきたいです。
よろしくおねがいします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

$nameではundefinedでコンパイルされません。
流れは理解できておらず、これを真似てやりたいこともできないはずです。

本当にやったのか疑わしいです。

投稿2019/06/29 13:43

yasutomi

総合スコア2937

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

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

mana_mana419

2019/06/29 13:47

追記失礼します。 こちらその参考書のホームページにあるコードからもってきたもので、参考書では$nameの箇所は$keyになっております。
yasutomi

2019/06/29 13:55

つまり参考書のホームページにあるコードからもってきただけで mana_mana419さんはコンパイル後のCSSコードを 見ていないということですね。 コンパイル後のCSSコードを見れば $key, $valueがどのように対応しているかわかるため 自身でコンパイルして確認してみてください。
mana_mana419

2019/06/29 14:01

追記コメントありがとうございます。 自身で一度このコードを一から書き、そして変数やセレクタなど自分が使いたいものに置き換えてコンパイルもできました。 なので流れは理解出来ているのですが、教科書に$keyと$valueに$colors-nameのキーと値がそれぞれ割り当てられると書いてなかったため確認をしたく質問をさせていただきました。 長くお付き合いさせてしまいすいません。
yasutomi

2019/06/29 14:07

コンパイル後のCSSコードを見れば $key, $valueがどのように対応しているかわかるはずなのですが 確認してもわからなかったということですね。 なぜ教科書に$keyと$valueに$colors-nameのキーと値が それぞれ割り当てられると書いてなかったかというと コンパイル後のCSSコードを見れば 一目瞭然なので書かなかったのだと思います。 ``` .sns__btn { background-repeat: no-repeat; } .sns__btn.-twitter { background-image: url(/img/icon_twitter.png); background-color: #1b95e0; } .sns__btn.-facebook { background-image: url(/img/icon_facebook.png); background-color: #3b5998; } .sns__btn.-googleplus { background-image: url(/img/icon_googleplus.png); background-color: #dc4e41; } ```
mana_mana419

2019/06/29 14:29

そうだったんですね! ここまで長く付き合っていただき、やっと腑に落ちつくことができました! 丁寧にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問