Sass运算

Sass 支持数字的加减乘除等运算 (+, -, *, /)，如果必要会在不同单位间转换值

$size: 1000px;
.root {
  width: $size + 200px;
}
.root1 {
  width: $size - 200px;
}
.root2 {
  width: $size * 2;
}
.root3 {
  width: ($size / 2);
}
.root4 {
  width: ($size - 400) * 2;
}

注意

运算过程中，不同单位不要参与运算

乘或除的时候不要带单位，加减可以带单位

在移动端适配的时候，通常会有 REM 计算

例如：根 font-size为 50px, 设计师给的数值是340px

$fontREM: 50;
.root {
  width: (340rem / $fontREM);
}

效果展示

<div id="content">
  <h1>1</h1>
  <p class="p1">2</p>
  <p class="p2">3</p>
  <p class="p3">4</p>
</div>

$size: 14px;
#content {
  h1 {
    font-size: $size;
  }
  .p1 {
    font-size: $size - 2px;
  }
  .p2 {
    font-size: $size + 2;
  }
  .p3 {
    font-size: $size * 2;
  }
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。