opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Run prettier on all *.md files

Browse source 
```
prettier '{app,source}/**/**.md' --write
```
This commit is contained in:
Oliver Davies 2020-03-08 17:52:59 +00:00
parent a3ceeaf0f3
commit 85a10c545b
170 changed files with 5127 additions and 2282 deletions
Download patch file Download diff file Expand all files Collapse all files

15
source/_posts/include-css-fonts-using-sass-each-loop.md
View file

@ -8,9 +8,13 @@ tags:
- fonts
- sass
---
How to use an @each loop in SASS to quickly include multiple font files within your stylesheet.
Using a file structure similar to this, organise your font files into directories, using the the font name for both the directory name and for the file names.
How to use an @each loop in SASS to quickly include multiple font files within
your stylesheet.
Using a file structure similar to this, organise your font files into
directories, using the the font name for both the directory name and for the
file names.
```language-bash
.
@ -36,7 +40,9 @@ Using a file structure similar to this, organise your font files into directorie
│ └── FuturaItalic.woff
```
Within your SASS file, start an `@each` loop, listing the names of the fonts. In the same way as PHP's `foreach` loop, each font name will get looped through using the `$family` variable and then compiled into CSS.
Within your SASS file, start an `@each` loop, listing the names of the fonts. In
the same way as PHP's `foreach` loop, each font name will get looped through
using the `$family` variable and then compiled into CSS.
```language-scss
@each $family in FuturaBook, FuturaBold, FuturaBoldItalic, FuturaItalic {
@ -53,7 +59,8 @@ Within your SASS file, start an `@each` loop, listing the names of the fonts. In
}
```
When the CSS has been compiled, you can then use in your CSS in the standard way.
When the CSS has been compiled, you can then use in your CSS in the standard
way.
```language-scss
font-family: "FuturaBook";