Sass 提供了一组内置的数字函数，这些函数可以帮助你在样式表中进行数学运算和单位转换。以下是 Sass 中一些常用的数字函数：
数学运算函数
1.percentage($number):
percentage($number) 函数在 Sass 中用于将一个无单位的数值转换为百分比。这个函数特别适用于需要将小数或分数转换成百分比格式的情况。
示例
假设你有一个宽度值是 0.75（即 3/4 或 75%），你可以使用 percentage() 函数来将其转换为百分比形式：
$width-fraction: 0.75;.container {width: percentage($width-fraction); // 这将输出 75%
}
编译后的 CSS 将会是：
.container {width: 75%;
}
更多示例
如果你想创建一个响应式布局，并且希望元素的宽度基于父容器的比例来定义，可以这样用：
@mixin responsive-width($fraction) {width: percentage($fraction);
}.element-half {@include responsive-width(0.5); // 50%
}.element-third {@include responsive-width(1/3); // 约等于 33.33333%
}
编译后的 CSS 将会是：
.element-half {width: 50%;
}.element-third {width: 33.33333%;
}
注意事项
percentage()函数只接受没有单位的数值作为参数。如果你尝试传递带有单位的数值，比如10px，那么 Sass 编译器将会抛出错误。- 如果你需要确保传入的数值是没有单位的，可以在调用
percentage()函数之前使用unitless()函数进行检查。
通过这些例子，你应该能够更好地理解如何在实际项目中使用 percentage($number) 函数了。
2.round($number):
round($number) 函数在 Sass 中用于将一个数值四舍五入到最接近的整数。这对于确保尺寸、间距等 CSS 属性值为整数特别有用，尤其是在处理动态计算或响应式布局时。
示例
假设你有一个元素的宽度是基于视口宽度（vw）的一个分数，并且你希望将其四舍五入到最近的整数值：
$width-fraction: 12.75vw;.container {width: round($width-fraction); // 这将输出 13vw 因为 12.75 四舍五入后是 13
}
编译后的 CSS 将会是：
.container {width: 13vw;
}
更多示例
如果你正在创建一个栅格系统，其中列宽是根据容器宽度按比例分配的，你可以使用 round() 来保证列宽为整数，避免小数点带来的潜在渲染问题：
@mixin grid-column($fraction, $container-width) {width: round($fraction * $container-width);
}.container {width: 960px; // 假设容器宽度为 960px
}.column-half {@include grid-column(0.5, 960px); // 应该返回 480px
}.column-third {@include grid-column(1/3, 960px); // 约等于 320px
}
编译后的 CSS 将会是：
.container {width: 960px;
}.column-half {width: 480px;
}.column-third {width: 320px;
}
注意事项
round()函数可以处理带单位和不带单位的数值。- 如果你需要更精确地控制四舍五入的行为（例如总是向上或向下取整），可以考虑使用
ceil()或floor()函数。
通过这些例子，你应该能够理解如何在实际项目中使用 round($number) 函数了。
3.ceil($number):
ceil($number) 函数在 Sass 中用于将一个数值向上取整到最接近的整数。这意味着任何带有小数部分的数字都会被提升到下一个更高的整数。这在需要确保尺寸、间距等 CSS 属性值不会小于某个最小值时特别有用。
示例
假设你有一个元素的高度是基于视口高度（vh）的一个分数，并且你希望将其向上取整到最近的整数值：
$height-fraction: 12.3vh;.container {height: ceil($height-fraction); // 这将输出 13vh 因为 12.3 向上取整后是 13
}
编译后的 CSS 将会是：
.container {height: 13vh;
}
更多示例：栅格系统中的应用
如果你正在创建一个栅格系统，其中列宽是根据容器宽度按比例分配的，你可以使用 ceil() 来确保列宽总是整数，从而避免小数点带来的潜在渲染问题或布局问题：
@mixin grid-column($fraction, $container-width) {width: ceil($fraction * $container-width);
}.container {width: 960px; // 假设容器宽度为 960px
}.column-third {@include grid-column(1/3, 961px); // 约等于 320px，但如果是320.333则变为321px
}
编译后的 CSS 将会是：
.container {width: 960px;
}.column-third {width: 321px; /* 如果计算结果为 320.333... */
}
注意事项
ceil()函数可以处理带单位和不带单位的数值。- 使用
ceil()可以确保你的尺寸永远不会低于计算出的小数值，这对于确保元素有足够的空间显示内容非常重要。 - 如果你需要向下取整，可以考虑使用
floor()函数；如果需要四舍五入，则可以使用round()函数。
通过这些例子，你应该能够理解如何在实际项目中使用 ceil($number) 函数了。如果有更多问题或需要进一步的帮助，请随时提问！
4.floor($number):
floor($number) 函数在 Sass 中用于将一个数值向下取整到最接近的整数。这意味着任何带有小数部分的数字都会被截断为下一个更低的整数。这在需要确保尺寸、间距等 CSS 属性值不会超过某个最大值时特别有用。
示例
假设你有一个元素的高度是基于视口高度（vh）的一个分数，并且你希望将其向下取整到最近的整数值：
$height-fraction: 12.8vh;.container {height: floor($height-fraction); // 这将输出 12vh 因为 12.8 向下取整后是 12
}
编译后的 CSS 将会是：
.container {height: 12vh;
}
更多示例：栅格系统中的应用
如果你正在创建一个栅格系统，其中列宽是根据容器宽度按比例分配的，你可以使用 floor() 来确保列宽总是整数，从而避免小数点带来的潜在渲染问题或布局问题：
@mixin grid-column($fraction, $container-width) {width: floor($fraction * $container-width);
}.container {width: 960px; // 假设容器宽度为 960px
}.column-third {@include grid-column(1/3, 962px); // 约等于 320px，但如果是320.666则变为320px
}
编译后的 CSS 将会是：
.container {width: 960px;
}.column-third {width: 320px; /* 如果计算结果为 320.666... */
}
注意事项
floor()函数可以处理带单位和不带单位的数值。- 使用
floor()可以确保你的尺寸永远不会超过计算出的小数值，这对于确保元素不会占用过多空间非常重要。 - 如果你需要向上取整，可以考虑使用
ceil()函数；如果需要四舍五入，则可以使用round()函数。
通过这些例子，你应该能够理解如何在实际项目中使用 floor($number) 函数了。
5.abs($number):
abs($number) 函数在 Sass 中用于获取一个数值的绝对值。这意味着无论输入的数值是正数还是负数，输出总是非负数。这对于确保某些 CSS 属性（如宽度、高度或边距）不会出现负值特别有用。
示例
假设你有一个元素的左边距是基于某个计算结果，而这个结果可能是负数，但你希望确保它始终是非负数：
$margin-left: -10px;.container {margin-left: abs($margin-left); // 这将输出 10px 因为 -10 的绝对值是 10
}
编译后的 CSS 将会是：
.container {margin-left: 10px;
}
更多示例：动态布局中的应用
如果你正在创建一个动态布局，其中元素的位置或尺寸取决于某些变量，这些变量可能会产生负数，你可以使用 abs() 来确保最终的 CSS 值是非负数：
@mixin dynamic-position($x, $y) {left: abs($x);top: abs($y);
}.element {@include dynamic-position(-50px, -20px); // 确保位置值不会是负数
}
编译后的 CSS 将会是：
.element {left: 50px;top: 20px;
}
注意事项
abs()函数可以处理带单位和不带单位的数值。- 使用
abs()可以确保你的尺寸、位置或其他 CSS 属性值始终为正值，这有助于避免布局问题或意外的样式表现。 - 如果你需要进行其他类型的数学运算，Sass 提供了多种内置函数，例如
round(),ceil(),floor(), 和percentage()等等。
通过这些例子，你应该能够理解如何在实际项目中使用 abs($number) 函数了。
6.min($numbers...) 和 max($numbers...):
min($numbers...) 和 max($numbers...) 函数在 Sass 中用于从一组数值中分别找出最小值和最大值。这两个函数对于确保某些 CSS 属性（如宽度、高度或边距）不会超出指定范围特别有用。
示例：栅格系统中的应用
如果你正在创建一个栅格系统，并且希望确保列宽在一个合理的范围内：
@mixin grid-column($fraction, $container-width) {// 计算列宽$column-width: $fraction * $container-width;// 使用 min() 和 max() 来限制列宽width: min(max(150px, $column-width), 300px);
}.container {width: 960px; // 假设容器宽度为 960px
}.column-third {@include grid-column(1/3, 960px); // 列宽将在 150px 和 300px 之间
}
编译后的 CSS 将会是：
.container {width: 960px;
}.column-third {width: 320px; /* 如果计算结果为 320px */
}
在这个例子中，即使 1/3 的 $container-width 可能会导致不同的宽度，最终的宽度也会被限制在 150px 到 300px 之间。
注意事项
min()和max()函数可以处理带单位和不带单位的数值。- 这些函数非常适合用来创建响应式设计，确保元素尺寸保持在合理范围内。
- 如果你需要更复杂的条件逻辑，可以结合
if()函数或其他控制指令来实现。
通过这些例子，你应该能够理解如何在实际项目中使用 min($numbers...) 和 max($numbers...) 函数了。
7.random() 和 random($limit):
当然，random() 和 random($limit) 函数在 Sass 中用于生成伪随机数。random() 函数返回一个介于 0 和 1 之间的浮点数（不包括 1），而 random($limit) 则返回一个介于 1 和 $limit 之间的整数（包括 1 和 $limit）。
示例：使用 random()
假设你想要为一组元素添加随机的颜色或透明度，可以使用 random() 函数来实现这一点：
@mixin random-opacity {opacity: random(); // 返回 0 到 1 之间的随机浮点数
}.item {@include random-opacity;
}
编译后的 CSS 将会是：
.item {opacity: 0.732; /* 示例输出，每次编译可能会不同 */
}
示例：使用 random($limit)
如果你想要创建一个包含随机宽度的元素，并且希望这些宽度在一定的范围内（例如，1 到 100 像素之间），你可以使用 random($limit) 函数：
$width-limit: 100;@mixin random-width {width: #{random($width-limit)}px; // 返回 1 到 100 之间的随机整数
}.random-item {@include random-width;
}
编译后的 CSS 将会是：
.random-item {width: 42px; /* 示例输出，每次编译可能会不同 */
}
更多示例：动态颜色
如果你想为多个元素分配随机颜色，可以结合 random() 函数与颜色函数一起使用：
@mixin random-color {color: hsl(random(360), 100%, 50%); // 随机色调，饱和度为100%，亮度为50%
}.item-1 {@include random-color;
}.item-2 {@include random-color;
}.item-3 {@include random-color;
}
编译后的 CSS 可能会是：
.item-1 {color: hsl(120, 100%, 50%);
}.item-2 {color: hsl(240, 100%, 50%);
}.item-3 {color: hsl(300, 100%, 50%);
}
注意事项
random()和random($limit)是伪随机数生成器，这意味着它们基于算法生成数字，并不是真正随机的。- 每次编译 Sass 文件时，
random()函数都会生成新的随机值，因此如果你需要固定的随机值，应该考虑将生成的结果存储在一个变量中。 - 使用
random($limit)时，请确保$limit是一个正整数，否则可能会导致错误。
通过这些例子，你应该能够理解如何在实际项目中使用 random() 和 random($limit) 函数了。
单位转换函数
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) 函数了。
其他有用的函数
pow($base, $exponent) 函数在 Sass 中用于计算一个数的幂次方。它接受两个参数：基数 $base 和指数 $exponent，并返回基数的指数次幂的结果。
示例：使用 pow($base, $exponent)
假设你想要根据某个比例动态调整元素的尺寸，并且这个尺寸是基于另一个值的平方或立方等幂运算来决定的：
@mixin scale-size($base, $exponent) {width: #{pow($base, $exponent)}px;height: #{pow($base, $exponent)}px;
}.element-square {@include scale-size(10, 2); // 基数为 10，指数为 2（平方）
}.element-cube {@include scale-size(5, 3); // 基数为 5，指数为 3（立方）
}
编译后的 CSS 将会是：
.element-square {width: 100px; /* 10 的平方 */height: 100px;
}.element-cube {width: 125px; /* 5 的立方 */height: 125px;
}
在这个例子中：
.element-square的宽度和高度都是 10 的平方，即 100px。.element-cube的宽度和高度都是 5 的立方，即 125px。
通过这例子，你应该能够理解如何在实际项目中使用 pow($base, $exponent) 函数了。
使用这些函数，你可以更灵活地处理数值，并在你的 CSS 样式中实现动态计算。例如，你可以基于屏幕尺寸、字体大小或其他变量来调整元素的尺寸或位置。