跳至主要內容

Sass运算

刘春龙原创...小于 1 分钟WEB前端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-size50px, 设计师给的数值是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;
  }
}

轻松一刻 🎧

音乐
音乐

视频教程 🎥

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

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7