WEBLIC LLC

ブログ

Sass mixinの引数に0を指定する方法

Web制作

2016年12月12日

bg01

背景画像をカラムごとに違う画像を配置するため、mixinを使って設定しましたが、うまくいきませんでした。
ちなみに背景画像は
bg01.png
bg02.png
bg03.png



と連番で作っています。
まず、下記のように普通に書いてみると、
[css]
@mixin bgSet($numset:01) {
background: url(../images/bg#{$numset}.png) no-repeat left top;
}

{
@include bgSet(01)
}
[/css]

出力結果は下記のように01になって欲しいとことが1となってしまいました。。。
[css]
{
background: url(../images/bg1.png) no-repeat left top;
}
[/css]

これを回避するために下記のように記述したら狙い通りの出力結果を得ることができました。
[css]
@mixin bgSet($numset:"01") {
background: url(../images/bg#{$numset}.png) no-repeat left top;
}

{
@include bgSet("01")
}
[/css]

引数の値のところに”(ダブルコーテーション)を入れてあげると解決!

ちなみにSassのバージョンは3.4.22です。

関連記事

Web制作

コーディングを効率化するEmmetはすごく便利!

10数年前からコーディングに携わっていたボクは、ずっとDreamweaverを愛用していましたが、こ...

2016年11月4日

Web制作

WordPressのContact Form 7にキャプチャを導入する方法

昨年末あたりからWEBLICのサイトのお問い合わせフォームからちょくちょくスパムが届くようになり困っ...

2017年1月12日

Web制作

ファーストビューに動画を!メリットと注意点の解説

ウェブサイトにおいて、訪問者の最初の印象を決定づけるファーストビューは非常に重要です。静的な画像やテ...

2024年3月7日

Web制作

Dreamweaver CC2017を試してみる

先日アップデートされたAdobe Dreamweaver CC2017を試してみました。まず見違える...

2016年11月14日

Web制作

低予算でのWordPress運用ガイド!子テーマの重要性を解説

ホームページの制作に予算制限がある中で、自社のスタッフがWordPressを使ってサイトを構築するこ...

2024年7月30日

  • カテゴリー

  • 本日、 6人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社