【Sass】背景画像を複数設定したい

Sass初心者です。
今までCSSでしか書いたことがなく、Sass(scss)の書き方も解るようになりたいと勉強中です。

###実現したいこと
1.複数のボックスの上部にラインの装飾を設定する
2.一部のボックスにはアイコンも設定する

ボックスの上部のラインをbackgroundで設定しています。
複数のボックスに設定したいので、@mixinで定義しました。

scss
1@mixin line {
2	background: url(../images/line.png) repeat-x;
3}
4
5.box01 {
6	@include line;
7}
8
9.box02 {
10	@include line;
11}
12
13.box03 {
14	@include line;
15}
16

しかし、.box03だけアイコンも表示したく、こちらもbackgroundで設定したいです。
（訳あって擬似要素などでは設定したくありません）

今までSassを使わずに書いていたときは
下記のように、値をカンマで区切って2つ画像を設定していました。

css
1.box03 {
2	background: url(../images/line.png) repeat-x, url(../images/icon.png) no-repeat right 20px center;
3}

なので、Sassでもコンパイルした後に上記のような状態になるようにしたいと考えているのですが、
どのように記述したらよいのか分かりません。

@mixinでラインの設定だけしていますが、
これにアイコンも追加するような記述はできるのでしょうか？

効率のよい記述のしかたがありましたら教えていただきたいです。
どうぞよろしくお願いいたします。

x_x

2018/12/18 08:57

プロパティ値が違うので、lineは使わずに書いたらいいのではないのですか？できない理由があれば追記してください。

退会済みユーザー

2018/12/18 09:46

できない理由はないのですが、ラインの設定を定義してあるので、それを読み込んだ上でアイコンの設定もできたら便利だなと思いまして… 何か他の関数なども使えば実現できるのだろうかと思い、質問いたしました。ないようであれば、諦めてlineを使わずに書きたいと思います…。

行動規範の内容に同意します

回答1件

ベストアンサー

自分はやりませんが、あえてやるならif文で分岐させてみるとか？

SCSS
1@mixin line($flag: false) {
2  @if $flag == true {
3    background: url(../images/line.png) repeat-x, url(../images/icon.png) no-repeat right 20px center;
4  }
5  @else {
6    background: url(../images/line.png) repeat-x;
7  }
8}
9
10.box01 {
11  @include line;
12}
13
14.box02 {
15  @include line;
16}
17
18.box03 {
19  @include line(true);
20}