scss rem 转换函数

最新推荐文章于 2024-09-22 21:45:36 发布

weixin_33750452

最新推荐文章于 2024-09-22 21:45:36 发布

阅读量934

点赞数 1

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/szatpig/p/10709289.html

本文介绍了一种在SCSS中使用的样式函数，该函数用于将像素单位转换为rem单位，以实现响应式布局。示例代码展示了如何使用此函数设置按钮的样式，包括行高、文本对齐、颜色、字体大小、宽度、边距、背景颜色、边框和圆角等属性。同时，还提供了按钮禁用状态下的样式调整。

scss样式函数：

@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}

示例：

.common-button{
  line-height: px2rem(90px);
  text-align: center;
  color: #fff;
  font-size: px2rem(30px);
  width:100%;
  margin-top: px2rem(20px);
  border:none;
  background-color: $color-ff6f33;
  border-radius: px2rem(8px);
  &:disabled{
    background-color: #cacaca;
    color: #919191;
    border: 0.015rem solid #cacaca;
  }
}