26

私は 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に従って可能です。

ただし、次の mixin では、10 で割る代わりに、mixin は数字の間にスラッシュを追加するだけです。つまり、これは次のとおりです。

@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が変数を数値として認識し、除算演算子を正しく使用するようにする方法はありますか?

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

4

3 に答える 3

29

これを試して：

padding: #{$padding / 10}rem;

SASS/SCSS での連結には ruby​​ 構文が使用されており、変数型の組み合わせである連結に続く数式を組み合わせていたので、機能しなかったことは驚くことではありません。

#{here} 内に含まれる式と変数は、行の残りの部分とは別のものとして評価されるため、行の残りの部分は型キャストされません。また、予期しないときに出力が引用されている場合にも役立ちます (unquote() 関数と同様)。

于 2013-10-17T10:44:05.313 に答える
21

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

最初に @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;
    }
}

これを Gist として含む rem mixins のコレクションをここに作成しましたhttps://gist.github.com/doughamlin/7103259

于 2013-10-22T17:38:20.300 に答える
0

役立つかもしれないことの1つは、 （別名）calcと一緒に使用することです。例えば。interpolation#{}

$height: 10px;
$padding: 2px;

height: calc(#{$height} + #{$padding * 2}); // calc(10px + 4px)

これは同じではありません...

height: calc($height + #{$padding * 2});
// resolves to...
height: calc($height + 4px); // ERROR

height: #{$height + $padding * 2};
// resolves to...
height: 10px + 4px; // ERROR
于 2021-03-15T18:40:13.043 に答える