代码之家  ›  专栏  ›  技术社区  ›  quickshiftin

SCSS混入不正确编译

  •  1
  • quickshiftin  · 技术社区  · 7 年前

    我正试着根据视窗调整一些文字的大小,发现 this thread .

    我正在尝试使用类似于 this answer

    font-size: calc(3vw + 3vh);
    

    所以我提出了这个方案

    /* Font sizing based on size of the viewport */
    @mixin vp-font-size($multiplier: 1) {
      font-size: calc((1vw + 1vh) * $multiplier);
    }
    .vp-font-size {
      p {
        @include vp-font-size(.8);
      }
      .h6 {
        @include vp-font-size(.9);
      }
      .h5 {
        @include vp-font-size(1.0);
      }
      .h4 {
        @include vp-font-size(1.1);
      }
      .h3 {
        @include vp-font-size(1.2);
      }
      .h2 {
        @include vp-font-size(1.3);
      }
      .h1 {
        @include vp-font-size(1.4);
      }
    }
    

    但是,它正在编译到这个

    .vp-font-size p {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h6 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h5 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h4 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h3 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h2 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    
    .vp-font-size .h1 {
      font-size: calc((1vw + 1vh) * $multiplier); }
    

    当我把 font-size: calc((1vw + 1vh) * 1.1) ,我的浏览器可以理解它那么我使用的scss解析器有什么问题吗?

    我在看 scss documentation 这似乎是正确的。我在用 node-sass 是的。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Pytth    7 年前

    你的语法有点不对劲。与…联机 calc , $multiplier 应该是 #{$multiplier}

    @mixin vp-font-size($multiplier: 1) { font-size: calc((1vw + 1vh) * #{$multiplier}); } .vp-font-size { p { @include vp-font-size(.8); } .h6 { @include vp-font-size(.9); } .h5 { @include vp-font-size(1.0); } .h4 { @include vp-font-size(1.1); } .h3 { @include vp-font-size(1.2); } .h2 { @include vp-font-size(1.3); } .h1 { @include vp-font-size(1.4); } }

    编辑:

    这里有一个指向 codepen 和SCSS一起要查看编译的代码,请单击css面板右上角的胡萝卜和“查看编译的css”。