- フォントのインポート: まず、Sassファイル内で使用するフォントをインポートする必要があります。以下の例では、Google Fontsから「Open Sans」フォントをインポートする方法を示します。
@import url('https://fonts.googleapis.com/css?family=Open+Sans');- フォントの適用:
フォントを適用するために、Sassの変数を使用してフォントファミリーを指定します。以下の例では、
$font-family変数に「Open Sans」を設定し、それを要素に適用しています。
$font-family: 'Open Sans', sans-serif;
body {
font-family: $font-family;
}
h1 {
font-family: $font-family;
}- フォントのスタイルとウェイトの変更:
Sassを使用すると、フォントのスタイルやウェイトを簡単に変更できます。以下の例では、
$font-style変数と$font-weight変数を使用して、要素ごとにフォントのスタイルとウェイトを指定しています。
$font-style: italic;
$font-weight: bold;
h2 {
font-family: $font-family;
font-style: $font-style;
font-weight: $font-weight;
}- フォントサイズの指定:
フォントサイズを指定する場合は、Sassの変数を使用して簡単に設定できます。以下の例では、
$font-size変数を使用して、要素のフォントサイズを指定しています。
$font-size: 16px;
p {
font-family: $font-family;
font-size: $font-size;
}以上が、Sassを使用してフォントをインポートし、適用するための基本的な手順とコード例です。これにより、スタイルシートの管理が容易になり、一貫性のあるデザインが実現できます。さまざまなフォントやスタイルを試して、自分のプロジェクトに最適なデザインを見つけてください。