Переменная Force должна быть локальной в SASS - PullRequest
Новая
       17

Переменная Force должна быть локальной в SASS

0 голосов
/ 17 декабря 2018

Предположим, у меня есть следующий частичный 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.Однако я не хочу, чтобы эта переменная была глобальной и экспортировалась в каждый файл, который импортирует этот.

Прямо сейчас, когда я делаю: 

@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 (которую нельзя экспортировать).

1 Ответ

0 голосов
/ 17 декабря 2018

Единственный способ, который я нашел до сих пор, - определить миксин, чтобы фактически сделать переменную локальной: 

@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();
...