Question

我一直在使用David Walsh博客的伟大REM到PX mixin功能 - 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 */

}

这允许您编写以下内容：

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

如果$ px-only = false，则输出以下内容：

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

如果$ px-only = true，则在IE样式表中显示以下内容：

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

我希望避免创建单独的样式表来输出IE特定的像素回退并定位正文类，如下所示：

<!--[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]-->

是否有人对如何实现这一点有任何想法，所以在同一样式表中输出类似于下面代码的内容？

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

任何帮助都会很棒！

Answer 1

只有功能才能满足您的要求。函数用于返回单个值。你必须使用mixins来获得所需的效果。此外，当你可以利用浏览器解析CSS的方式时，拥有一个单独的选择器绝对没有任何好处（同样，你所要求的工作所涉及的努力根本不值得）。

您想要的输出应如下所示：

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

这意味着您需要这样的mixin：

@mixin rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

请参阅：Automate pixel fallback using REM units throughout a project

SASS：REM到PX mixin的样式相同

1 个答案: