「Sass(SCSS)において外部ファイルからフォントを読み込む際、どう読み込むべきか」の話です。 CSSからSassに本格的に乗り換えてまだ日の浅いこの頃、外部ファイルとして存在するフォントをどう「SASSっぽくスマートに」読み込むにはどうすべきか探っていて数時間模索してました。その結論を端的に書き残します。 1. mixin使え まずフォントを読み込み際にいちばんナンセンスなのは変換後のCSSにべた書きすること。これはひどい。ではSASSのポテンシャルを引き出しつつスマートに書くにはどうすべきか。と考えてmixinに至りました。まずmixinディレクトリ内に_fonts.scssを用意、もしくは_mixin.scss自体に下記のコードを書き込みます。 @mixin font-face($name, $path, $weight: null, $style: null, $exts: o
![Sass(SCSS)でフォント読み込むときはmixinを使うべきと悟った話 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/296fa1e635929171370c2e548201176971dcb1ed/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9U2FzcyUyOFNDU1MlMjklRTMlODElQTclRTMlODMlOTUlRTMlODIlQTklRTMlODMlQjMlRTMlODMlODglRTglQUElQUQlRTMlODElQkYlRTglQkUlQkMlRTMlODIlODAlRTMlODElQTglRTMlODElOEQlRTMlODElQUZtaXhpbiVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSU4NiVFMyU4MSVCOSVFMyU4MSU4RCVFMyU4MSVBOCVFNiU4MiU5RiVFMyU4MSVBMyVFMyU4MSU5RiVFOCVBOSVCMSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODgxMTU2MGUxOGMxNTEzZDJhYTY3OTZhYzE5MWQ3Y2E%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWWFtYS10byZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGI3MTM1ZjBhYzIwYjEyODFmZmUyNzUxZjY1NDZmMGQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9809b1801eab8e2351f0c147f566faa4)