Как вы удаляете единицы измерения из уравнения Sass mixin? - PullRequest
Новая
       13

Как вы удаляете единицы измерения из уравнения Sass mixin?

6 голосов
/ 03 августа 2011

Я написал очень простой миксин Sass для преобразования значений пикселей в значения rem (см. Статью Джонатана Снука о преимуществах использования rems ). Вот код: 

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

Этот миксин работает довольно хорошо, но я немного недоволен синтаксисом include для него. Видите, я бы предпочел передать значение пикселя в оператор включения вместо простого числа. Это небольшая деталь, но она добавит семантическое значение к оператору включения, которого в данный момент не существует. Вот что я получаю, когда пытаюсь передать значение пикселя в оператор включения: 

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

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

Как только Sass видит значение пикселя, переданное в уравнение, он выводит «px». Я хочу вырезать эту единицу измерения из , как если бы я использовал parseFloat или parseInt в JavaScript. Как это можно сделать в миксине Sass?

Ответы [ 2 ]

8 голосов
/ 02 октября 2013

Вот функция, которую вы можете использовать.Основан на глобальных вспомогательных функциях Foundation .

@function strip-unit($num) {

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

Пример использования: 

... Removed for brevity ...

@mixin rem( $key: font-size, $val ) {
    #{$key}: strip-unit( $val ) * 1px;
    #{$key}: ( strip-unit( $val ) / $base-font-size ) * 1rem;
}
7 голосов
/ 05 августа 2011

Удаление единиц из числа осуществляется делением, как в алгебре. 

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

Единицы в Sass можно рассматривать как в реальной математике, поэтому px / px / rem переходит к rem.Наслаждайся этим!

...