↓ メインコンテンツへスキップ
ジャレッド リンスキー
  1. 投稿/

GoHugoでSassy CSSを使い始める

· loading · loading ·
ジャレッド リンスキー
著者
ジャレッド リンスキー
韓国に住むキウイ
目次

はじめに
#

SASS（Syntactically Awesome Stylesheets）は、よりクリーンでモジュール化された保守しやすいスタイルシートを記述できる強力なCSSプリプロセッサです。ウェブサイトにGoHugoを使用している場合、SASSを統合することで開発ワークフローを大幅に改善できます。

この記事では、GoHugoプロジェクトでSASSをセットアップする方法と、このツールを最大限に活用するための実用的なヒントを紹介します。

なぜGoHugoでSASSを使用するのか？
#

SASSは、変数、ネストされたルール、ミックスイン、関数などの機能でCSSを拡張します。これにより、再利用可能で簡潔なコードを書くことが容易になります。GoHugoの組み込みPipes機能はSASS/SCSSをサポートしており、スタイルシートのシームレスな統合と自動コンパイルが可能です。

主な利点：
#

  • 変数：色、フォント、サイズなどの再利用可能な値を保存できます。
  • ミックスイン：CSS宣言のグループを再利用できます。
  • 関数：動的に操作を実行して値を生成できます。
  • モジュール性：CSSを複数のファイルに分割して簡単にインポートできます。
  • 圧縮：CSSファイルを自動的に圧縮して読み込み時間を短縮できます。

公式リソース
#

GoHugoでSCSSを始める
#

GoHugoプロジェクトでSCSSをセットアップして使用開始するには、次の4つの簡単な手順に従ってください：

ステップ1：アセットディレクトリの設定
#

プロジェクトのルートにassetsフォルダを作成または移動します。または、resourcesフォルダ内にネストする場合は、config.tomlファイルを次のように更新します：

assetDir = "resources/assets"

ステップ2：sassフォルダの作成
#

assetsフォルダ内に、sassという名前の新しいフォルダを作成します。これがSCSSファイルを保存する場所になります。

ステップ3：メインSCSSファイルの追加
#

sassフォルダ内にmain.scssという名前のファイルを作成します。このファイルがスタイルのエントリーポイントになります。サンプルのSCSSコードを追加して開始します：

// assets/sass/main.scss

// 変数
$primary-color: #3498db;

// ミックスイン
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// スタイル
body {
  font-family: Arial, sans-serif;
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

ステップ4：HTMLテンプレートの更新
#

head.htmlパーシャルに、SCSSファイルをプロジェクトに統合するために次のコードを含めます：

{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
<link rel="stylesheet" href="{{ $style.Permalink }}">

コード内のファイル名がSCSSエントリーポイント（main.scss）のファイル名と一致していることを確認してください。

ボーナス：SCSSファイルの整理
#

保守性を向上させるために、SCSSを複数のファイルに分割してmain.scssにインポートできます。例えば：

// assets/sass/_variables.scss
$primary-color: #3498db;

// assets/sass/_mixins.scss
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// assets/sass/main.scss
@import "variables";
@import "mixins";

body {
  background-color: $primary-color;
}

h1 {
  @include center;
  color: white;
}

まとめ
#

SASSをGoHugoプロジェクトに統合することで、よりクリーンで効率的なCSSを書くための可能性の世界が開かれます。わずかな手順で、SASSの機能を最大限に活用してフロントエンド開発ワークフローを向上させることができます。

GoHugoでSASSを使用することについて質問やヒントがありますか？以下のコメントで共有してください！