web-dev-qa-db-ja.com

可変引数Sassミックスインの計算

私はCSSのサイズ設定にピクセルフォールバックを使用してremユニットを使用するのが好きで、それを支援するためにmixinを作成しようとしています。 font-sizeの場合、これは簡単です。

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

しかし、パディング、マージンなどのために、ミックスインは可変引数を受け入れる必要があります。これは、Sassのドキュメントごとに可能です http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

ただし、次のミックスインでは、10で割るのではなく、数字の間にスラッシュを追加するだけです。つまり、これ：

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

これを出力します：

.class {
    padding: 24px;
    padding: 24/10rem;
}

これの代わりに、私が期待するように：

.class {
    padding: 24px;
    padding: 2.4rem;
}

Sassが変数を数値として認識し、したがってそれらの除算演算子を正しく使用するようにする方法はありますか？

また、これをさらにテストした結果、連結は最後の変数でのみ行われることに気付きました。

csssassmixins
21
Doug Hamlin

ここで実際に使用する必要があったのは、各値を個別に操作するために変数引数ではなくリストだったようです。

最初に@eachディレクティブを使用してこれを試しましたが、宣言内での使用方法がわかりませんでした。これによりエラーがスローされます。

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

そのため、考えられる4つのケースのそれぞれを個別に処理する（つまり、1、2、3、または4個の引数を渡す）もっと冗長なものを書くことになりました。それはこのように見え、私が望んでいたように機能します：

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

ここに要点としてこれを含むレムミックスインのコレクションを作成しました https://Gist.github.com/doughamlin/7103259

20
Doug Hamlin

これを試して：

padding: #{$padding / 10}rem;

SASS/SCSSでの連結では、Ruby構文を使用します。また、変数タイプの混合である連結を伴う数学方程式を混合していたため、機能しなかったことは驚きではありません。

＃{here}に含まれる式と変数は、行の残りの部分とは別のものであるかのように評価されるため、行の残りを型キャストしません。また、（unquote（）関数のように）予期していなかったときに出力が引用されている場合にも役立ちます

19
Owen C. Jones