web-dev-qa-db-ja.com

SASSで動的ミックスインまたは関数名を定義するにはどうすればよいですか？

リスト内の各アイテムにちなんで名付けられたミックスインをSASSで動的に作成したいのですが、機能していないようです。

これを試しましたが、エラーが発生します：

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@each $event-icon in $event-icons
  @mixin event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0

エラー：

Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}"

この使用法はSASSでサポートされていませんか？マニュアルには何も見つかりませんでした。

csssassmixinscss-preprocessordynamic-function
15
Cristian

@ mixinsの変数補間は、現在サポートされていないようです。

SASSのドキュメントではこれを#{} interpolationと呼び、 このように説明しています ：

補間：＃{}

＃{を使用して、セレクターおよびプロパティ名でSassScript変数を使用することもできます。 }補間構文：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

documentation によると、変数名の補間はセレクターとプロパティ名でのみサポートされているようであり、@mixinsではサポートされていないようです。その機能が必要な場合は、 問題を提出 にすることをお勧めしますが、 これ はすでに説明内容を追跡している可能性があります。

編集：話している種類のスタイリングを実現するには、@mixinを使用する必要がありますか？補間付きのセレクターを使用できますか？たとえば、これは機能しますか？

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@for $i from 1 to length($event-icons)
  $event-icon: nth($event-icons, $i)
  .event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0
23
Stuart M

この瞬間（2014年3月30日）の時点で、Chris Eppsteinはまだ動的ミックスインの実装を拒否しています。 issue 857およびissue 626Githubで。

私はクリスに、この機能がサスがその真の力を解き放つために非常に重要であることを納得させようとしてきました...そして私だけではありません。

これが重要な機能であることに同意する場合は、issue 857およびにアクセスしてください。 問題626そしてこの問題に自分で対処してください。この機能のユースケースを提供する人が多ければ多いほど、Chrisや他の主要な開発者の1人を説得できる可能性が高くなります。

[〜＃〜] update [〜＃〜]：2016年、Eppsteinはリクエストの数が多かったため、この機能を実装することになりました。ただし、今日（2018年半ば）、これらの変更はまだメインブランチにマージされていないため、sassリリースでは利用できません。 issue 2057 を参照してください。

14
John Slegers

最善の解決策は、引数を取る単一のミックスインを実装することです。

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@mixin event-icon($name)
  @if not index($event-icons, $name)
    @error "#{$name} is not an event icon."
  background-position: -($event-icon-width * $i) 0
5
chriseppstein