3_Sass 数字函数 --[CSS预处理]-单位转换函数

时间：2024-12-15 07:05:11

1.unit($number):

unit($number) 函数在 Sass 中用于返回给定数字的单位，而不返回其数值部分。如果数字没有单位，则返回空字符串 ""。

示例：使用 unit($number)

假设我们有一个变量 $fontSize，它包含一个带有单位的值，比如像素（px）。我们可以使用 unit() 函数来获取这个值的单位，并基于该单位执行不同的逻辑或输出信息。

$fontSize: 16px;

@mixin check-unit {
  @if unit($fontSize) == "px" {
    content: "The unit is pixels.";
  } @else if unit($fontSize) == "em" {
    content: "The unit is ems.";
  } @else {
    content: "The unit is something else.";
  }
}

body::after {
  @include check-unit;
}

编译后的 CSS 将会是：

body::after {
  content: "The unit is pixels.";
}

在这个例子中，我们创建了一个 mixin 名为 check-unit，它检查 $fontSize 变量的单位，并根据单位输出不同的文本内容。因为 $fontSize 的值是 16px，所以它的单位是 "px"，因此最终输出的内容是 “The unit is pixels.”。

更多示例：处理不同单位

如果你想要根据不同的单位应用不同的样式规则，你可以这样做：

@mixin apply-padding($padding) {
  // 检查是否有单位
  $unit: unit($padding);
  
  // 根据单位应用不同的样式
  @if $unit == "px" {
    padding: $padding; // 直接应用像素值
  } @else if $unit == "em" or $unit == "rem" {
    padding: $padding * 2; // 对于相对单位，加倍padding
  } @else {
    padding: #{$padding}0px; // 如果没有单位，默认添加0px
  }
}

.element {
  @include apply-padding(10); // 没有单位的情况
  @include apply-padding(1.5em); // em 单位的情况
  @include apply-padding(20px); // px 单位的情况
}

这段代码将会生成如下 CSS：

.element {
  padding: 100px;
  padding: 3em;
  padding: 20px;
}

在这里插入图片描述

请注意，在实际使用中，直接将无单位的数值乘以10并附加单位的做法可能不符合预期结果，这里仅作为演示用途。通常情况下，如果没有提供单位，Sass 会默认将其视为无单位的数值处理，不会自动添加任何单位。

通过这些例子，你应该能更好地理解如何在 Sass 中使用 unit($number) 函数了。

2.unitless($number):

unitless($number) 函数在 Sass 中用于检查一个数值是否没有单位。如果数值是无单位的（例如纯数字），则返回 true；如果有单位（例如像素、百分比等），则返回 false。

示例：使用 unitless($number)

假设你有一个函数或 mixin，它需要根据传入的值是否有单位来决定如何处理这个值。你可以使用 unitless() 来判断并执行不同的逻辑。

示例 1：调整字体大小
@mixin set-font-size($size) {
  @if unitless($size) {
    font-size: $size * 1rem; // 如果没有单位，则假定为 rem 单位
  } @else {
    font-size: $size; // 如果有单位，则直接使用提供的单位
  }
}

body {
  @include set-font-size(16); // 没有单位的情况
  @include set-font-size(20px); // 有单位的情况
}

编译后的 CSS 将会是：

body {
  font-size: 16rem;
  font-size: 20px;
}

请注意，实际应用中 font-size: 16rem 可能会导致非常大的字体尺寸，因为 1rem 通常等于根元素的字体大小（默认通常是 16px）。这里只是为了演示目的。

示例 2：动态边距

如果你想要创建一个 mixin，它能够接受带单位或不带单位的边距值，并相应地调整样式：

@mixin dynamic-margin($margin) {
  @if unitless($margin) {
    margin: #{$margin}px; // 如果没有单位，默认添加 px
  } @else {
    margin: $margin; // 如果有单位，则直接使用提供的单位
  }
}

.container {
  @include dynamic-margin(20); // 没有单位的情况
  @include dynamic-margin(2em); // 有单位的情况
}

编译后的 CSS 将会是：

.container {
  margin: 20px;
  margin: 2em;
}

在这里插入图片描述

在这个例子中，dynamic-margin mixin 根据传入的 $margin 是否带有单位来决定是默认添加 px 还是保持原有单位。

注意事项
  • unitless() 函数非常适合用来编写灵活的 mixins 或函数，这些代码可以处理带单位和不带单位的输入。
  • 使用 unitless() 可以帮助避免因单位缺失而导致的潜在错误，确保你的样式规则按照预期工作。

通过这些例子，你应该能够理解如何在实际项目中使用 unitless($number) 函数了。

3.comparable($number1, $number2):

comparable($number1, $number2) 函数在 Sass 中用于检查两个数值是否可以进行比较。具体来说，它会判断这两个数值是否有相同的单位或都是无单位的数值。如果它们是可比较的，则返回 true；否则返回 false。

这个函数对于确保你在数学运算中使用了兼容的单位非常有用，避免了不同单位之间不适当的计算。

示例：使用 comparable($number1, $number2)

假设你有一个 mixin，它需要根据传入的两个值是否具有相同单位来决定是否执行某些操作：

@mixin compare-values($value1, $value2) {
  @if comparable($value1, $value2) {
    content: "The values are comparable.";
  } @else {
    content: "The values are not comparable.";
  }
}

body::after {
  @include compare-values(10px, 20px); // 相同单位的情况
}

div::after {
  @include compare-values(10px, 2em); // 不同单位的情况
}

span::after {
  @include compare-values(10, 20); // 无单位的情况
}

编译后的 CSS 将会是：

body::after {
  content: "The values are comparable.";
}

div::after {
  content: "The values are not comparable.";
}

span::after {
  content: "The values are comparable.";
}

在这个例子中：

  • 对于 body::after，两个值都是像素（px），所以它们是可比较的。
  • 对于 div::after，一个值是像素（px），另一个是 em 单位（em），因此它们不可比较。
  • 对于 span::after，两个值都没有单位，所以它们也是可比较的。
更多示例：条件样式应用

如果你想要创建一个更加实用的场景，比如基于两个宽度值是否可比较来设置不同的样式规则：

@mixin set-width-if-comparable($width1, $width2) {
  @if comparable($width1, $width2) {
    width: $width1 + $width2; // 如果可比较，将两个宽度相加
  } @else {
    width: $width1; // 如果不可比较，仅使用第一个宽度
  }
}

.container {
  @include set-width-if-comparable(100px, 200px); // 可比较
}

.item {
  @include set-width-if-comparable(100px, 50%); // 不可比较
}

编译后的 CSS 将会是：

.container {
  width: 300px;
}

.item {
  width: 100px;
}

在这里插入图片描述

在这个例子中，.container 的宽度是两个可比较的像素值之和，而 .item 的宽度则只采用了第一个值，因为百分比和像素不可直接相加。

注意事项
  • comparable() 函数非常适合用来编写需要处理多个数值输入的 mixins 或函数，以确保这些数值的单位兼容。
  • 使用 comparable() 可以帮助防止由于单位不匹配而导致的意外错误或不正确的样式表现。

通过这些例子，你应该能够理解如何在实际项目中使用 comparable($number1, $number2) 函数了。

相关文章