css - SASS:在相同的样式表想法中混合 REM 到 PX-6ren

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

转载作者：行者123 更新时间：2023-11-28 12:14:48

27

4

我一直在使用来自 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 */

}

这允许您编写以下内容:

.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]-->

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

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

任何帮助都会很棒!

最佳答案

您不能只使用函数来完成您的要求。函数用于返回单个值。您必须使用 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);
}
// To convert px to rem
@mixin toRem($property, $value) {
  #{$property}: ($value / 16) + rem;
}

参见:Automate pixel fallback using REM units throughout a project

关于css - SASS:在相同的样式表想法中混合 REM 到 PX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24650285/

27

4

0

文章推荐： ios - SWRevealViewController 构建错误

文章推荐： ios - 设置 didSet 的问题

文章推荐： swift - 如何使用字典中的所有数据填充 tableView？

文章推荐： ios - 如何检索 PHAsset 的元数据？

c++ 将 printf 与 wprintf 混合(或将 cout 与 wcout 混合)
我知道您不应该将打印与 printf,cout 和 wprintf,wcout 混合使用，但是很难找到一个好的答案，为什么以及是否可以绕过它。问题是我使用了一个用 printf 打印的外部库，而我自己
Python多重继承/混合
我有以下问题: class A: animal = 'gerbil' def __init__(self): self.result = self.calculate_
OpenGL 混合 - 用不同的颜色填充交叉点
我在屏幕上渲染了一堆形状(多边形)，我没有使用深度测试。我只是希望这些形状在绘制在空白区域时使用自己的颜色，并且在绘制到任何非空区域时使用红色像素，即在我的情况下绘制在另一个多边形上。这里的问题实
grails - Groovy 混合？
我正在尝试在我的 Groovy/Grails 应用程序中混入一个类，我正在使用 the syntax defined in the docs ，但我不断收到错误消息。我有一个如下所示的域类: cla
OpenGL Alpha 混合
我已经找到了 5349574673 个关于 Alpha 混合的页面，但我仍然无法获得想要的结果。我正在尝试使用 opengl 使 gif/png 文件正确显示(具有透明度/半透明度)。这是我的初始化
javascript - 记录通过函数生成的类(混合)
我正在尝试记录以下代码，但我似乎无法让 JSDoc 记录该类，甚至无法引用它的存在。 // SomeMixin.js export default superclass => class SomeMi
scala - 家庭多态性+混合？
我有一个类型家族，我想使用 mixin 以模块化方式“丰富”它们。例如: trait Family { self => trait Dog { def dogname:String
ios - 混合 Storyboard中的单元和以编程方式创建的单元
我在 Storyboard中有 Collection View 。我在 Storyboard中有一部分单元格，还有我以编程方式创建的部分单元格。我应该在 sizeForItemAtIndexPath
c++ - 混合/修改数组访问
我有一个字节数组，我想更改它的访问方式。这是数组: char bytes[100]; 我想要另一个数组来改变原始数组的访问方式。如果我们可以将引用放在数组中，它看起来像这样: char& bytes_
c++ - c和c++混合
我需要从 c 文件调用 cpp 方法。我为此编写了这个界面.. cpp文件 extern "C" void C_Test(int p){ Class::CPP_Test(p); } c文件
移动和主要 CSS 混合
我的网站有两份 CSS 表，一份是主 CSS，一份是移动 CSS。问题是在移动设备(iPhone、Android)上查看时，两个样式表会混淆。例如，在 iPhone 上查看网站时，会应用主样式表中的某
Python Bokeh - 混合
维护人员的说明:此问题涉及已过时的 bokeh.charts API，该 API 已于多年前删除。有关使用现代 Bokeh 创建各种条形图的信息，请参阅: https://docs.bokeh.org
ios - 从另一个层中减去层，混合？
在下图中，蓝色圆圈仅用于调试目的。我的目标是蓝色圆圈后面的每一层都应该是透明的。我只想保持蓝色圆圈外面的可见。这是用 swift 编写的代码: let croissantView = UIV
SQL - 混合 AND 和 OR
我不是 SQL 专家。我正在使用 SQL Server 2005，我正在尝试弄清楚如何构造一个查询，以便它可以满足多种要求。我有两个表定义如下: Classroom - ID - Departme
完全不透明或透明的 openGL Alpha 混合
原创: 我之前问过这个问题，但我最初的例子有点不完整，我想我现在可以更具体地说明我的问题。对于上下文，我在旧的 Apple mac 计算机上使用 openGL 3.3 并尝试渲染四边形的重叠层。每个
YAML:将内联与同一对象的常规 map 混合
是否可以将内联(类似 json)映射与同一对象的常规映射定义混合使用？考虑以下示例: person: {age: 32, weight: 82} name: foo 生成的人应具有给定的年龄、体
inheritance - 如何在子类中将多个父类构造函数与 val 混合
假设我有一个 Parent 类，它有四个字段 A、B、C 和 D，这样 C 和 D 可以选择传递或使用默认实现进行初始化: open class Parent(val a: A, val b: B,
svn - 将存储库与 SVN 混合
我正在使用 symphony (1.4) 框架在 PHP 中开发一个 Web 应用程序。该代码使用 SVN 进行版本控制。在此网络应用程序中，我们所有客户共享一个共同的基础，以及一些专门为每个客户创建
Qt 小部件与顶部的 QML 混合
我想使用两个小部件(一次一个)作为我的应用程序的基础/背景，上面有一个 QML UI 和一个无边框窗口。它应该看起来像这样: 基于 OpenGL 的扫描组件通过窗口句柄操作的 3D 可视化组件多个
javascript - 混合 Angular 应用程序中的变化检测非常慢
我们有一个混合的 AngularJS/Angular 8 应用程序，并且我们不断遇到来自不同版本框架的组件之间的变化检测非常慢的问题。到目前为止，我们只在 Angular 组件中使用 AngularJ

首页

博学

6Ren·AI

商城

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