css - Sass 背景画像 mixin

Question

私は Sass の初心者ですが、自分用のワークフローを作成しようとしています。テーマデザインの「カラーパック」を生成し、mixin に次の変数を指定する必要があります。これを行うためのより良い方法はありますか?:

// folder,filename,extension,repeat,x-pos,y-pos
@mixin background ($folder:style1, $img:file, $type:png, $repeat:no-repeat, $x:0, $y:0) {
    background-image: url(./images/#{$folder}/#{$img}.#{$type});
    background-repeat: #{$repeat};
    background-position: #{$x}px #{$y}px;
}

私は次のように挿入しています：

#nav {
  @include background(style2,myimage,png,repeat-x,10,10);
}

これにより、次のようになります。

#nav {
  background-image: url(./images/style2/myimage.png);
  background-repeat: repeat-x;
  background-position: 10px 10px;
}

可能であれば CSS の短縮形を使用したいのですが、出力でエラーが発生しました。これが最善の方法でない場合は、専門家のアドバイスをいただければ幸いです。

score 35 · Accepted Answer

パックの構造/適用方法によっては、ループを使用して一連の一般的なスタイルを生成できる場合があります。こちらのドキュメントをご覧ください：http ：//sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

画像のURLを取得するために本当に3つの別々のコンポーネントが必要ですか？そうではないでしょう：$imgそしてそれを/folder/img.extはるかに簡単に設定しますか？

#{}また、ちなみにリピートは必要ありません。

これがあなたが求めているものであることを願っています…質問は、あなたが実際に何をする必要があるかという点であまり具体的ではありません。

乾杯、ジャニス

アップデート：

さて、あなたはあなたの質問を更新したようです（ありがとう）。私はこれが一般的な使用のために少し良いかもしれないと信じています：

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
    background: {
        image: url($imgpath);
        position: $position;
        repeat: $repeat;
    }
}
.testing {
    @include background('/my/img/path.png');
}

これにより、次のように出力されます。

.testing {
  background-image: url("/my/img/path.png");
  background-position: 0 0;
  background-repeat: no-repeat;
}

または、短縮バージョンを使用できます。

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
    @include backgroundShorthand('/my/img/path.png');
}

生成されるもの：

.testing2 {
  background: transparent url(/my/img/path.png) no-repeat 0 0;
}

最後に、イメージディレクトリへのベースパスを個別に指定する場合は、次の操作を実行できます。

$imagedir:'/static/images/'; // define the base path before the mixin

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
    @include backgroundShorthandWithExternalVar('filename.png');
}

これにより、以下が生成されます。

.testing3 {
  background: transparent url(/static/images/filename.png) no-repeat 0 0;
}

これはあなたが必要としたものですか？

そうでない場合は、質問または返信/コメントを更新してください。

score 2 · Accepted Answer

$var を 1 つ取ると、簡単になります。

$list: pranav shah

=author-images
  @each $author in $list
.photo-#{$author}
  background: image-url("avatars/#{$author}.png") no-repeat

   .author-bio
+author-images

CSS

.author-bio .photo-adam {
 background: url('/images/avatars/adam.png') no-repeat;
 }
.author-bio .photo-john {
 background: url('/images/avatars/john.png') no-repeat;
 }
.author-bio .photo-wynn {
 background: url('/images/avatars/wynn.png') no-repeat;
 }
.author-bio .photo-mason {
 background: url('/images/avatars/mason.png') no-repeat;
 }
.author-bio .photo-kuroir {
background: url('/images/avatars/kuroir.png') no-repeat;
}

css - Sass 背景画像 mixin

3 に答える 3

Related

Reference