scss基础

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

例如:#sidebar {
  width: 30%;
  background-color: #faa;
}

编译前#sidebar {
  a { text-decoration: none; }
}

编译后#sidebar { a { text-decoration: none } }

变量法：

$bg:#d5d5d5;
使用
div{
  color: $bg;
}
  编译后
  div{color:#d5d5d5}

MIXINS 方法

定义方法  方法名  参数@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

使用 include .box {
  border: 3px solid #777;
  @include rounded(0.5em);
}

scss中不支持calc不同单位计算

.app-inner {
    display: flex;
    height: calc(100% - $topbar-height);
}

如图

可以看到sass并没有解析这个$topbar-height。

最后在github的issue中找到了方法，要想在sass的calc中使用变量，必须对这个变量使用sass的插值方法(#{$variable})。

正确写法：

.app-inner {
    display: flex;
    height: calc(100% - #{$topbar-height});
}

issue地址:  点击打开链接