Use Hugo extended for Sass/CSS (#13113)

.gitignore

@@ -1,7 +1,6 @@
 **/.DS_Store
 **/desktop.ini
 _site/**
-.sass-cache/**
 CNAME
 .travis.yml
 .idea/

Dockerfile

@@ -20,7 +20,7 @@ ARG HUGO_VERSION
 
 RUN mkdir -p /usr/local/src && \
     cd /usr/local/src && \
-    curl -L https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-64bit.tar.gz | tar -xz && \
+    curl -L https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz && \
     mv hugo /usr/local/bin/hugo && \
     addgroup -Sg 1000 hugo && \
     adduser -Sg hugo -u 1000 -h /src hugo

Makefile

@@ -5,7 +5,7 @@ DOCKER_RUN   = $(DOCKER) run --rm --interactive --tty --volume $(CURDIR):/src
 NODE_BIN     = node_modules/.bin
 NETLIFY_FUNC = $(NODE_BIN)/netlify-lambda
 
-.PHONY: all build sass build-preview help serve
+.PHONY: all build build-preview help serve
 
 help: ## Show this help.
 	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {sub("\\\\n",sprintf("\n%22c"," "), $$2);printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
@@ -29,12 +29,6 @@ production-build: check-hugo-versions build check-headers-file ## Build the prod
 non-production-build: test-examples check-hugo-versions ## Build the non-production site, which adds noindex headers to prevent indexing
 	hugo --enableGitInfo
 
-sass-build:
-	scripts/sass.sh build
-
-sass-develop:
-	scripts/sass.sh develop
-
 serve: ## Boot the development server.
 	hugo server --buildFuture
 

assets/sass/style.sass

@@ -1,9 +1,11 @@
-
 @import "reset"
 @import "skin"
 
 // media queries
 @import "base"
-@import "case-studies"
 @import "tablet"
 @import "desktop"
+
+{{ if .Params.case_study_styles }}
+@import "case-studies"
+{{ end }}

content/en/docs/contribute/style/content-organization.md

@@ -125,7 +125,7 @@ Some important notes to the files in the bundles:
 
 ## Styles
 
-The `SASS` source of the stylesheets for this site is stored below `src/sass` and can be built with `make sass` (note that Hugo will get `SASS` support soon, see https://github.com/gohugoio/hugo/issues/4243).
+The [SASS](https://sass-lang.com/) source of the stylesheets for this site is stored in `assets/sass` and is automatically built by Hugo.
 
 {{% /capture %}}
 

layouts/partials/css.html

@@ -1,5 +1,18 @@
+{{ $inServerMode := site.IsServer }}
+{{ $sass         := "sass/style.sass" }}
+{{ $cssOutput    := "css/style.css" }}
+{{ $devOpts      := (dict "targetPath" $cssOutput "enableSourceMap" true) }}
+{{ $prodOpts     := (dict "targetPath" $cssOutput "outputStyle" "compressed") }}
+{{ $cssOpts      := cond $inServerMode $devOpts $prodOpts }}
+{{ $css          := resources.Get $sass | resources.ExecuteAsTemplate $sass . | toCSS $cssOpts }}
+{{ if $inServerMode }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
+{{ else }}
+{{ $prodCss := $css | fingerprint }}
+<link rel="stylesheet" href="{{ $prodCss.RelPermalink }}" integrity="{{ $prodCss.Data.Integrity }}">
+{{ end }}
+
 <link rel="stylesheet" href="/css/base_fonts.css">
-<link rel="stylesheet" href="/css/styles.css">
 {{- if .Params.case_study_styles }}
 <link rel="stylesheet" href="/css/case-study-styles.css">
 {{- end }}

sass/styles.sass

@@ -1,7 +0,0 @@
-@import "reset"
-@import "skin"
-
-// media queries
-@import "base"
-@import "tablet"
-@import "desktop"

scripts/sass.sh

@@ -1,38 +0,0 @@
-#!/bin/bash
-
-if [[ $# -eq 0 ]] ; then
-    echo "You must specify a command from the following: build, develop"
-    exit 0
-fi
-
-__build() {
-    echo "Building Kubernetes website CSS from Sass sources..."
-
-    for filename in case-study-styles styles; do
-        echo $filename
-        sass \
-            --style=compressed \
-            sass/$filename.sass static/css/$filename.css
-    done
-
-    echo "Done building CSS!"
-}
-
-__develop() {
-    echo "Watching Sass sources for changes..."
-
-    sass \
-        --watch \
-        sass/styles.sass:static/css/styles.css \
-        sass/case-study-styles.sass:static/css/case-study-styles.css
-}
-
-case $1 in
-    build)
-        __build
-    ;;
-
-    develop)
-        __develop
-    ;;
-esac