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制作

アイコンを軽量化して、Webサイトの表示速度を速くする

Googleの調査によれば、ページの読み込み時間が1秒から3秒に増加すると、離脱率が32%増加すると...

2023年9月7日

Web制作

スマホサイトで便利!片方可変のボックスレイアウトの作りかた

こんにちは。丹羽です。スマホサイトでは画面の幅がデバイスによってバラバラです。より少ないCSSコーデ...

2016年10月31日

Web制作

初心者向け解説!内部リンクでサイト構造を強化し、SEO効果UP

先日、GoogleのX(旧Twitter)で内部リンクに関するヒントが投稿されていました。その内容を...

2024年8月8日

Web制作

メイリオフォントはCSSでイタリックが効かない!

先日ある案件でデバイスフォントを斜体にする必要がありました。普段は何も気にせずCSSでイタリックを設...

2017年4月3日

Web制作

Webサイト導線設計の考え方

効果的な導線設計はWebサイトの成功に欠かせません。この記事では、Webサイト担当者が、ターゲットに...

2023年11月28日

  • カテゴリー

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

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社