Question

考虑一下，我有以下SASS部分：

@import '../modules/cdn';


$font-url: '#{$cdn-base-url}/fonts/MyFont';


@font-face {
  font-family: 'MyFont';
  src:
    url('#{$font-url}-regular.woff2') format('woff2'),
    url('#{$font-url}-regular.woff') format('woff')
  ;
}

我只想为我节省一些输入，所以我定义了$font-url helper变量。但是，我不希望此变量是全局变量，也不希望导出到每个导入该文件的文件。

现在，当我这样做时：

@import 'partials/my-font';


p {
  font-family: MyFont, sans-serif;
  &:after {
    content: $font-url;
  }
}

我得到以下结果：

@font-face {
  font-family: 'MyFont';
  src:
    url("https://cdn.example.com/fonts/MyFont-regular.woff2") format("woff2"),
    url("https://cdn.example.com/fonts/My Font-regular.woff") format("woff")
  ;
}

p {
  font-family: MyFont, sans-serif;
}

p:after {
  content: "https://cdn.example.com/fonts/MyFont";
}

但是，由于缺少$font-url变量（不应导出），我希望在这种情况下编译失败。

Answer 1

到目前为止，我发现的唯一方法是定义一个mixin来真正使变量成为本地变量：

@import '../../modules/cdn';


@mixin my-font {

  $font-url: '#{$cdn-base-url}/fonts/MyFont';

  @font-face {
    font-family: 'MyFont';
    src:
      url('#{$font-url}-regular.woff2') format('woff2'),
      url('#{$font-url}-regular.woff') format('woff')
    ;
  }

}

应该这样称呼：

@import 'fonts/my-font';

@include my-font();

强制变量在SASS中为局部变量

1 个答案: