Değişken argümanı üzerinde matematik yapmak Sass karışımları

Question

CSS boyutlandırmam için piksel yedeklemeli rem birimleri kullanıyorum ve bunlara yardımcı olmak için karmaları hazırlamaya çalışıyorum. font ölçülerinde, bu kolaydır:

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

Ama vs. dolgu, marj için mixin aşağıdaki mixin ile http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

Ancak Sass belgelerine başına mümkündür değişken argümanları, kabul etmesi gerekir 10'a bölünmek yerine, mixin sadece rakamlar arasında bir eğik çizgi ekliyor. Yani, şudur:

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

sonucu verir:

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

emin Sass yapmanın bir yolu var mı gibi değişkenler tanır: Bunun yerine

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

gibi ben beklenebilir sayıları ve böylelikle bölüm operatörünü doğru şekilde kullanır?

Ayrıca, bu daha test ettikten sonra, ben birleştirme sadece son değişkene gerçekleşir fark etti.

Answer 1

Burada kullanmak için gerçekten gerekli olan şey, bir değişken argümanı yerine kullanması gereken bir işlemdi. her bir değer ayrı ayrı.

Ben ilk @each yönergesi ile bunu çalıştı, ancak bir bildiri içine nasıl kullanılacağını çözemedim. Bu bir hata atar:

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

yüzden çok daha ayrıntılı ayrı ayrı dört olası durumların her işleme birşeyler yazmayı bitti (yani oturum 1, 2, 3 veya 4 argümanları geçer). Bu böyle görünüyor ve ben istediğim gibi çalışır:

@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; 
    } 
} 

Burada bir Gist'e olarak bu da dahil rem Mixins toplanmasını yapılan https://gist.github.com/doughamlin/7103259

ait

Answer 2

bunu bir değişken bağımsız değişken listesi olarak belirledik bir sebebi var mı? Soruna neden olan bu gibi görünüyor. Üç noktadan kurtulun ve beklediğiniz gibi davranır.

Answer 3

bu deneyin: SUKDÖ'nün/SCSS içinde Birleştirilmesi

padding: #{$padding/10}rem; 

yakut sözdizimi kullanır ve bir değişken türü karışımı olan bir dizilimin, ardından matematiksel denklem karıştırma, bu yüzden bana şaşırtıcı değil öyle işe yaramadı # içine dahil

İfadeler ve değişkenler {burada} hattının kalanını typecasting yok dolayısıyla ayrı sanki hattının geri kalan kısmına değerlendirildi ve edilmektedir. Eğer beklemediğinizde çıktı alınıyorsa da kullanışlı gelir (unquote() işlevi gibi)