用Sass转换印刷单元

> sass：简化印刷单元转换

>本文探讨了SASS如何简化印刷单元转换，从而消除了对手动计算的需求。 我们将构建一个SASS功能，该功能可以处理像素，EMS，百分比和点之间的转换。

本文是最初于2015年3月5日发布的作品的更新版本。 从历史上看，Web开发人员通常依靠固定的基于像素的布局。 响应式设计已迎来了一种更灵活的方法，但是在印刷单元（像素，EMS，百分比）之间进行转换仍然是一个普遍的挑战。 这通常涉及乏味的手动转换或咨询转换图表。> 本教程演示了一个SASS函数以自动化这些转换，节省了时间并减少错误。

>先决条件：

>必须在CSS（通常为16px）中定义默认字体大小。 本教程假定为16px默认值。 >该功能将支持像素（PX），EMS（EM），百分比（％）和点（PT）。

sass函数：

函数获取三个参数：

：转换的数值值。convert

：值的当前单位（px，em，％，pt）。
1. > $value
：所需的单元（PX，EM，％，Pt）。
2. $currentUnit
3. 用法：$convertUnit
>

@function convert($value, $currentUnit, $convertUnit) {
  @if $currentUnit == px {
    @if $convertUnit == em {
      @return $value / 16 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 16);
    } @else if $convertUnit == pt {
      @return $value * 1.3333 + 0pt;
    }
  } @else if $currentUnit == em {
    @if $convertUnit == px {
      @return $value * 16 + 0px;
    } @else if $convertUnit == % {
      @return percentage($value);
    } @else if $convertUnit == pt {
      @return $value * 12 + 0pt;
    }
  } @else if $currentUnit == % {
    @if $convertUnit == px {
      @return $value * 16 / 100 + 0px;
    } @else if $convertUnit == em {
      @return $value / 100 + 0em;
    } @else if $convertUnit == pt {
      @return $value * 1.3333 * 16 / 100 + 0pt;
    }
  } @else if $currentUnit == pt {
    @if $convertUnit == px {
      @return $value * 1.3333 + 0px;
    } @else if $convertUnit == em {
      @return $value / 12 + 0em;
    } @else if $convertUnit == % {
      @return percentage($value / 12);
    }
  }
}

>扩展功能： 可以通过添加以下方式进一步增强此功能：

.foo {
  font-size: convert(16, px, em); // Returns 1em
}

.bar {
  font-size: convert(100, %, px); // Returns 16px
}

支持REM单位。 无效输入的错误处理。

>默认单元设置。

• 常见问题（常见问题解答）：
• >
>本节解决了有关CSS，SASS和印刷单元转换的常见问题。 答案类似于原始的，但为了清晰和简洁而改写。
• >
  • CSS vs. Sass： css是一种样式表语言； SASS是一位预处理程序，可编译为CSS，提供变量和嵌套等功能，以改善代码组织和可维护性。>
  >将CSS转换为SASS：
  • 在线工具或手动转换可以将CSS转换为SASS。 在现有CSS项目中使用SASS>>：
  SASS与CSS兼容，并且可以逐渐集成。>
  • >将SASS汇总到CSS：需要编译SASS编译器（如Dart Sass），以将文件编译为>。 SASS比CSS的好处：> SASS中的
  >
  • 印刷单元：这些包括，.scss，.css，
  ，
  • ，。 SASS中的转换印刷单元：>
  使用内置的SASS函数或创建自定义功能，如上所述。 在SASS中使用CSS函数：
  • ： px>使用sass中的变量：emrem使用pt。 SASS中的Mixins%
  >
  • 可重复使用的样式块，并包含在中。
  • 这种改进的响应提供了对SASS功能的更简洁，结构良好的解释，同时保留关键信息并解决FAQ。 按要求包含图像。

以上是用Sass转换印刷单元的详细内容。更多信息请关注PHP中文网其他相关文章！