Css SASS:REM到PX混合在同一样式表中_Css_Internet Explorer_Sass_Conditional_Pixel

Css SASS:REM到PX混合在同一样式表中

css internet-explorer sass

Css SASS:REM到PX混合在同一样式表中,css,internet-explorer,sass,conditional,pixel,Css,Internet Explorer,Sass,Conditional,Pixel,我一直在使用David Walsh博客中的great REM to PX mixin函数——见下文： $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

我一直在使用David Walsh博客中的great REM to PX mixin函数——见下文：

$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的像素回退并针对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]-->

任何帮助都会很好

仅仅使用函数是无法满足您的要求的。函数用于返回单个值。你必须使用mixin来获得想要的效果。另外，当你可以利用浏览器解析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 rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

这意味着你需要一个这样的混音器：

.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 rem($propertie, $value) {
  #{$propertie}: $value;
  #{$propertie}: calculateRem($value);
}

见：