Sass/Scss font path variable
mdo opened this issue · 2 comments
Would you consider adding the ability to generate font URLs for Sass/Scss that include a $font-path
variable? This would help with our Bootstrap Icons project where we want folks to be able to import our project as a dependency and configure to their setup. As far as I can tell this feature isn't available yet.
$bi-font-path: "./fonts" !default;
@font-face {
font-family: "bootstrap-icons";
src: url("#{$bi-font-path}/bootstrap-icons.woff2?8bd4575acf83c7696dc7a14a966660a3") format("woff2"),
url("#{$bi-font-path}/bootstrap-icons.woff?8bd4575acf83c7696dc7a14a966660a3") format("woff");
}
X-ref: twbs/icons#563
/cc @XhmikosR
Can you do that using the fontUrl
option?
Otherwise, I think considering the size of your project, I would think that having a custom template for SCSS would make aa lot of sense (you probably don't want to rely on the defaults forever) - if neither of these are solutions you like, happy to help
Totally forgot to reply to you here @tancredi. We already use a custom template, but I don't think it's possible to have different fontUrl
options for CSS and SCSS, and I don't think there's a way to get a separate {{ hash }}
either. Right now we're doing this in our scss.hbs
:
${{ name }}-font: "{{ name }}" !default;
${{ name }}-font-dir: "{{ fontsUrl }}" !default;
${{ name }}-font-file: #{${{ name }}-font-dir}/#{${{ name }}-font} !default;
${{ name }}-font-hash: "{{ hash }}" !default;
${{ name }}-font-src: url("#{${{ name }}-font-file}.woff2?#{${{ name }}-font-hash}") format("woff2"), url("#{${{ name }}-font-file}.woff?#{${{ name }}-font-hash}") format("woff") !default;
@font-face {
font-display: block;
font-family: ${{ name }}-font;
src: ${{ name }}-font-src;
}
.{{prefix}}::before,
[class^="{{prefix}}-"]::before,
[class*=" {{prefix}}-"]::before {
display: inline-block;
font-family: ${{ name }}-font !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
${{ name }}-map: (
{{# each codepoints }}
"{{ @key }}": "\\{{ codepoint this }}",
{{/ each }}
);
{{# each codepoints }}
.{{ ../prefix }}-{{ @key }}::before { content: map-get(${{ ../name }}-map, "{{ @key }}"); }
{{/ each }}