Работа с Ремами
/* Set up a variable for maths
*/ $doc-font-size: 16;
/* the font-size mixin
*/ @mixin font-size($size) {
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
}
/* example of usage */
.prose p {
@include font-size(16);
}
/* example compiled */
.prose p {
font-size: 16px; font-size: 1rem;
}
// This mixin outputs a property with rem units and a px fallback.
// Values passed without units are used as multipliers for the final
// rem and px values, all other units are output without modification.
// $base-font-size represents the root value of the document font-size
// in pixels.
//
// i.e. html { font-size: 100%;} // -> 16px
// Usage:
// @include px-and-rem([property], [multiplier | explicit value] [, ...]);
// Example 1:
//
// $base-font-size: 16px;
//
// .margin { @include px-and-rem(margin, 2);}
//
// becomes
//
// .margin {
// margin: 32px;
// margin: 2rem;
// }
// Example 2:
//
// $base-font-size: 16px;
//
// .padding { @include px-and-rem(padding, 1 2% 1.5em);}
//
// becomes
//
// .padding {
// padding: 16px 2% 1.5em;
// padding: 1rem 2% 1.5em;
// }
@function fix8_get_px_and_rem_val($val) {
$output: ();
@if type-of($val) == 'string' {
@if $val == 'auto' or $val == '!important' {
$output: join($val, $val);
@return $output;
}
} @else {
@if $val == 0 or $val == 0px {
$output: join(0, 0);
} @else if unitless($val) {
$output: join($val * $base-font-size, $val + rem);
} @else {
$output: join($val, $val);
}
@return $output;
}
@warn "#{$val} is not a valid value";
@return false;
}
@mixin px-and-rem($prop, $vals) {
$px-list: ();
$rem-list: ();
@each $val in $vals {
$calcs: fix8_get_px_and_rem_val($val);
$px-list: append($px-list, nth($calcs, 1));
$rem-list: append($rem-list, nth($calcs, 2));
}
#{$prop}: $px-list;
#{$prop}: $rem-list;
}