SCSS

SCSS允许使用变量，所有变量以$开头

$title_font_size:px2rem(36px);

$blue : #1875e7;
div {
  color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
.rounded {
  border-#{$side}-radius: 5px;
}

使用计算方法(这里的方法是移动端适配,将px转换成rem) 参考 https://blog.csdn.net/xingxingxingge/article/details/79601258

@function px2rem($px) {
  $rem: 75px;
  @return $px/$rem + rem;
}

在SCSS使用变量

.title_bar{
  background-color: white;
  width: 100%;
  font-size: $title_font_size;
  border-bottom: 1px solid #e3e3e3;
  img{
    width: px2rem(22px);
    height: px2rem(22px);
  }
}

转换成CSS如下：

.title_bar {
  background-color: white;
  width: 100%;
  font-size: 0.48rem;
  border-bottom: 1px solid #e3e3e3; }
  .title_bar img {
    width: 0.2933333333rem;
    height: 0.2933333333rem; }