SCSS

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

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

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

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

使用计算方法(这里的方法是移动端适配,将px转换成rem)

@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; }

安装SCSS

一 下载ruby https://rubyinstaller.org/downloads/

二 安装过程一定要勾选这两个 完成后 ruby -v 检测一下安装的版本

三 安装sass 打开cmd 执行  gem install sass

如果报错, 执行 gem sources --add http://gems.ruby-china.org/ --remove https://rubygems.org/

然后再执行 gem install sass

四 webstrom配置scss