web-dev-qa-db-ja.com

Sassで変数を@mixinに設定しますか？

@include mixin();を変数に設定する方法はありますか？私はこれを試しました

@mixin bg-gradient($fallback, $type, $positionX, $positionY, $from, $from-percent, $to, $to-percent){
    background: $fallback;
    background: -webkit-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:    -moz-#{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
    background:         #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent);
}

$navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
body { $navBg; } // it gave me an error
cssvariablessassmixins
17
FoxKllD

具体的にそれを行う方法はわかりませんが、特定の種類のグラデーションで設定を乾かそうとしている場合は、ラッパーミックスインを作成できます。

@mixin navBg() {
    @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%);
}
body { @include navBg; }

編集：

ここ はSASS変数でサポートされているデータ型のリストです。ミックスイン呼び出しもその結果（CSSルール全体）も含まれていません。また、インクルードを文字列として扱い、補間しようとしましたが、これは最終結果のCSSでのみ機能し、それ以上のディレクティブでは機能しません。

26
Rick

戻り値をSASS変数に設定しようとしている場合は、@ mixinではなく@functionを使用する必要があります。これはしばらくの間私をハングアップさせ、@ functionに気づいていませんでした。例えば...

@function font($font-size, $line-height: 1.4, $font-family: Arial) {

    @if $line-height == 1.4 {
        $line-height: round($line-height*$font-size);
    }

    @return #{$font-size}/#{$line-height} $font-family;
}

$font-medium: font(20px);

ところで、これはこのユーザーが探しているものに正確に対応していませんが、これは変数をミックスインに設定することについてインターネット検索でポップアップする唯一のことなので、他の人が何をすべきかを知るためにここでこれを共有したいと思いましたこの状況が発生した場合。

8
Bruce Smith
@mixin gradient ($place, $bcolor1, $bcolor2){`<br>`
  background-image: linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -o-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -moz-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -webkit-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
  background-image: -ms-linear-gradient($place, $bcolor1, $bcolor2)`<br>`
}

body{
  @include gradient(bottom, #F90000 18%, #FF4C4C 66%)
}
3
Alejandro Oropeza Perez