SASS：REM 到 PX 混合在相同的样式表想法中

Question

I've been using the great REM to PX mixin function from David Walsh's blog - http://davidwalsh.name/rem-px-browser-function-sass - see below:我一直在使用 David Walsh 博客中出色的 REM 到 PX 混合函数 - http://davidwalsh.name/rem-px-browser-function-sass - 见下文：

$px-only:false;  

$pixelBase : 16; /* 1 */

@function parseInt($n) {
    @return $n / ($n * 0 + 1); /* 2 */
}

@function u($values){ /* 3 */

      $list: (); /* 4 */

      @each $value in $values { /* 5 */

            $unit : unit($value); /* 6 */
            $val  : parseInt($value); /* 2 */

            @if ($px-only) and ($unit == 'rem') { /* 7 */
                  $list: append($list, ($val * $pixelBase) + px); /* 7 */
            }

            @else if($unit == 'px') or ($unit == 'rem'){ /* 8 */
                  $list: append($list, $value); /* 8 */
            }

            @else {
                  @warn 'There is no unit conversion for #{$unit}'; /* 9 */
            }

      }

      @return $list(); /* 10 */

}

This allows you to write the following:这允许您编写以下内容：

.style {
    margin:u(1rem 2rem 20px 3rem);
    padding-bottom:u(0.25rem);
    font-size:u(0.875rem);
}

Which outputs the following if $px-only = false:如果 $px-only = false，则输出以下内容：

.style {
    margin: 1rem 2rem 20px 3rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

And the following in your IE stylesheet if $px-only = true:如果 $px-only = true，则 IE 样式表中的以下内容：

.style {
    margin: 16px 32px 20px 48px;
    padding-bottom: 4px;
    font-size: 14px;
}

I'd like to avoid having to create a separate stylesheet to output the IE specific pixel fallback and target the body class, like below:我想避免必须创建一个单独的样式表来输出 IE 特定的像素回退并定位 body 类，如下所示：

<!--[if lt IE 7 ]> <body class="ie6 "> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 "> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 "> <![endif]--> 
<!--[if !IE]><!--> <body> <!--<![endif]-->

Would anybody have any ideas on how this could be achieved so something similar to the below code is outputted in the same stylesheet?是否有人对如何实现这一点有任何想法，以便在同一样式表中输出类似于以下代码的内容？

.style {
    margin: 1rem 2rem 20px 3rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

.ie8 .style {
    margin: 16px 32px 20px 48px;
    padding-bottom: 4px;
    font-size: 14px;
}

Any help would be great!任何帮助都会很棒！

Answer 1

You can't do what you're asking for with just functions.你不能只用函数来做你所要求的。 Functions are for returning a single value.函数用于返回单个值。 You have to use mixins to get the desired effect.您必须使用 mixins 才能获得所需的效果。 Also, there is absolutely zero benefit to having a separate selector like that when you can take advantage of how browsers parse CSS (also, the effort involved in doing what you're asking for is simply not worth it).此外，当您可以利用浏览器解析 CSS 的方式时，拥有这样一个单独的选择器绝对是零好处（而且，做您所要求的事情所涉及的努力根本不值得）。

Your desired output should look like this:您所需的输出应如下所示：

.style {
    margin: 16px 32px 20px 48px;
    margin: 1rem 2rem 20px 3rem;
    padding-bottom: 4px;
    padding-bottom: 0.25rem;
    font-size: 14px;
    font-size: 0.875rem;
}

Which means you need a mixin like this:这意味着你需要一个像这样的 mixin：

@mixin rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}
// To convert px to rem
@mixin toRem($property, $value) {
  #{$property}: ($value / 16) + rem;
}

See: Automate pixel fallback using REM units throughout a project请参阅：在整个项目中使用 REM 单元自动执行像素回退

SASS：REM 到 PX 混合在相同的样式表想法中

问题描述

1 个解决方案

解决方案1
1 2014-07-09 11:05:27

SASS：REM 到 PX 混合在相同的样式表想法中

问题描述

1 个解决方案

解决方案1 1 2014-07-09 11:05:27

解决方案1
1 2014-07-09 11:05:27