Sass 中的单位，如何正确使用-JavaScript中文网-JavaScript教程资源分享门户

在 Sass 中，单位不仅是表示数值大小的一种方式，还可以影响到编译后的 CSS 代码的输出。如果你不了解 Sass 中单位的使用方法，可能会导致你的样式表出现问题。因此，正确理解和使用 Sass 中的单位非常重要。

像素（px）

像素是网页设计中最常用的单位，Sass 中也支持使用像素作为长度单位。例如：

$width: 200px;
.element {
  width: $width;
}

编译后的 CSS 代码为：

.element {
  width: 200px;
}

在 Sass 中，像素也可以作为计算单位，如下所示：

$width: 200px;
$padding: 20px;
.element {
  width: $width / 2;
  padding: $padding / 2;
}

编译后的 CSS 代码为：

.element {
  width: 100px;
  padding: 10px;
}

百分比是另一种常用的单位，在 Sass 中也支持使用百分比作为长度单位。例如：

$parentWidth: 500px;
$childWidth: 50%;
.parent {
  width: $parentWidth;
}
.child {
  width: $childWidth;
}

编译后的 CSS 代码为：

.parent {
  width: 500px;
}
.child {
  width: 50%;
}

角度是表示旋转角度的单位。在 Sass 中，可以使用角度作为旋转角度的单位。例如：

$angle: 90deg;
.element {
  transform: rotate($angle);
}

编译后的 CSS 代码为：

.element {
  transform: rotate(90deg);
}

时间作为单位，常常用于动画、过渡等效果的表示。在 Sass 中，可以使用秒（s）和毫秒（ms）作为时间单位。例如：

$duration: 1s;
.element {
  transition: all $duration;
}

编译后的 CSS 代码为：

.element {
  transition: all 1s;
}

em 和 rem 是相对单位，相对于父级和根元素的字体大小。在 Sass 中，可以使用 em 和 rem 作为长度单位。例如：

$fontSize: 16px;
$lineHeight: 1.5em;
$padding: 1rem;
.element {
  font-size: $fontSize;
  line-height: $lineHeight;
  padding: $padding;
}

编译后的 CSS 代码为：

.element {
  font-size: 16px;
  line-height: 24px; /* 16 * 1.5 */
  padding: 16px;
}

推荐使用 rem 作为长度单位，以便于实现响应式设计。

正确使用单位对于 Sass 中的样式表起到至关重要的作用。在使用 Sass 时，要仔细思考每个单位的使用方式，以便于编译后的 CSS 代码实现预期的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647899f0968c7c53b04cd84d