Foundation for Sites - 独学者Fossa

Name	Version
Foundation for Sites	v6.6.3
Hugo	v.0.80.0

Foundation for Sitesを使っている人は多いと思いますが、日本語の記事は少ないのかな？

Hugoで、scssを使って、Foundation for Sitesを使う一例を書いておきます。*1

themes/foundation/assets/scss/_setting.scss

_setting.scssは、node_modules/foundation-sites/scss/setting/_setting.scssから、コピーしています。

_setting.scssの中の

@import 'util/util';
           ↓
@import 'foundation-sites/scss/util/util';

に、書き換えます。

themes/foundation/assets/scss/style.scss

@import 'settings';
@import 'foundation-sites/scss/foundation';

@include foundation-everything;

themes/foundation/layouts/partial/head.html

<head>

  {{- $options := (dict "targetPath" "assets/css/style.css" "outputStyle" "compact" "enableSourceMap" true "includePaths" (slice "node_modules")) -}}
  {{- $css := resources.Get "scss/style.scss" | resources.ToCSS $options -}}
  <link rel="stylesheet" href="{{ $css.RelPermalink }}">

</head>

DEPRECATION WARNING

端末(MacやVisualStudio Codeだと、ターミナル)で、hugoと入力すると

Start building sites … 
DEPRECATION WARNING on line 115 of /home/<省略>/node_modules/foundation-sites/scss/util/_color.scss:
!global assignments won't be able to declare new variables in future versions.
Consider adding `$primary-color: null` at the top level.

上記のようなメッセージが、いくつか表示されますが、今はスルーしています。

*1:いろんなやり方があると思うので、一例です