Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SCSS support (for configuring font paths) #161

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

davidjb
Copy link

@davidjb davidjb commented Jan 16, 2020

This implements #79.

This adds support to typeface packages by adding _typeface.scss partial for setting a font-path variable. This is to enable support of Sass-centric build systems (eg sass directly, Bootstrap, etc) where files will be copied/put into a known location by another process (but not 'discovered' as in webpack).

The implementation means this is possible:

$open-sans-font-path:          "../dist/fonts/open-sans" !default;
@import "typeface-open-sans/typeface";

and the resulting CSS is populated with the correct font-path as set.

The naming of the imported partial is arbitrary -- it could just as easily be fonts or something else, but typeface seemed logical since it is the whole typeface. Ideally, it would have been ideal to name it index.scss or _index.scss to enable a simple @import "typeface-open-sans" from within Sass, but this causes ambiguity with the existing index.css file. As such, Sass won't build if both files are present (it used to be a warning and is now an error).

The choice to have typeface-specific variable names (eg $open-sans-font-path) gives flexibility over one generic $font-path variable so you can set different paths for different typefaces. Plus, being more specific means less chance of a conflict in existing projects.

The implementation in the code itself adds only a few minor changes to the build script and templates. There are no changes to the existing CSS builds for full backward compatibility.

This implements KyleAMathews#79.

This adds support to typeface packages by introducing a `_typeface.scss`
partial, which at present exists to facilitate setting a font-path
variable for a given typeface. This is to enable support of Sass-centric
build systems, such as via sass directly, where font files will be
copied/put into a known location by another process.

The implementation means this is possible:

```
$open-sans-font-path:          "../fonts/open-sans" !default;
@import "typeface-open-sans/typeface";
```

and the resulting CSS is populated with the correct font-path as set.

The naming of the imported partial is arbitrary -- it could just as
easily be `fonts` or something else. Ideally, it would have been
`index.scss` or `_index.scss` to enable a simple `@import
"typeface-open-sans"` from within Sass, but this causes ambiguity
with the existing `index.css` file and Sass won't build if both files
are present (it used to be a warning and is now an error).

The choice to have typeface-specific variable names gives flexibility
over one `$font-path` variable so you can set different paths for
different typefaces (plus being more specific means less chance of a
conflict in existing projects).

The implementation in the code itself adds only a few minor changes to
the build script and templates. There are no changes to the existing
CSS build for full backward compatibility.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant