Jak usunąć jednostki miary z równania Sass?

Question

Napisałem bardzo prosty mix Sass do konwertowania wartości pikseli na wartości rem (zobacz Jonathan Snook's article on the benefits of using rems). Oto kod:

// Mixin Code 
$base_font_size: 10; // 10px 
@mixin rem($key,$px) { 
    #{$key}: #{$px}px; 
    #{$key}: #{$px/$base_font_size}rem; 
} 

// Include syntax 
p { 
    @include rem(font-size,14); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

Ten mixin działa całkiem dobrze, ale jestem trochę niezadowolony ze składni dołączonej do niego. Widzisz, wolałbym przekazać wartość piksela do instrukcji include zamiast zwykłej liczby. Jest to niewielki szczegół, ale dodaje on znaczenie semantyczne do instrukcji include, która obecnie nie istnieje. Oto co mam kiedy próbuję przekazać wartość piksela w include oświadczenie:

// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14pxpx; 
    font-size: 1.4pxrem; 
} 

Po Sass widzi wartość piksela jest przekazywany do równania, to wyprowadza „px”. Chcę usunąć tę jednostkę miary z tak, jak gdybym używał parseFloat lub parseInt w JavaScript. Jak to zrobić we wnętrzu Sassa?

Answer 1

Usuwanie jednostek z liczby odbywa się według podziału, podobnie jak w algebrze.

$base-font-size: 10px; 
$rem-ratio: $base-font-size/1rem; 

@mixin rem($key,$px) { 
    #{$key}: $px; 
    #{$key}: $px/$rem-ratio; 
} 


// Include syntax 
p { 
    @include rem(font-size,14px); 
} 

// Rendered CSS 
p { 
    font-size: 14px; 
    font-size: 1.4rem; 
} 

Jednostki w Sass można traktować jak w prawdziwej matematyce, więc px/px/rem przechodzi do zwykłego rem. Ciesz się!

Answer 2

Oto funkcja, której można użyć. Oparte na globalnych funkcjach pomocniczych Foundation.

@function strip-unit($num) { 

    @return $num/($num * 0 + 1); 
} 

Przykładowe użycie:

... Removed for brevity ... 

@mixin rem($key: font-size, $val) { 
    #{$key}: strip-unit($val) * 1px; 
    #{$key}: (strip-unit($val)/$base-font-size) * 1rem; 
}