Move from custom.css to custom.scss to be able to use variables

assets/book.scss

@@ -218,3 +218,6 @@ aside nav,
     padding: $padding-16 * 2 $padding-16;
   }
 }
+
+// Add custom defined styles
+@import 'custom'

assets/custom.scss

@@ -0,0 +1,2 @@
+/* To be overridden by theme user */
+// @import "variables";

exampleSite/assets/custom.scss

@@ -0,0 +1 @@
+@import "variables"

exampleSite/static/styles.css

@@ -1 +0,0 @@
-/* Your custom styles here */

layouts/partials/docs/html-head.html

@@ -5,16 +5,11 @@
 <!-- Fonts for the theme -->
 <link href="https://fonts.googleapis.com/css?family=Oxygen|Oxygen+Mono:300,400,700" rel="stylesheet">
 
-<!-- Theme stylesheet, if possible do not edit this stylesheet -->
+<!-- Theme stylesheet, you can customize scss by creatig `assets/custom.scss` in your website -->
 <link rel="stylesheet" href="{{ "normalize.min.css" | relURL }}">
 {{ $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
 
-<!-- Custom stylesheet - for your changes -->
-{{ if (fileExists "styles.css" | relURL) -}}
-<link rel="stylesheet"  href="{{ "styles.css" | relURL }}?v={{ now.Unix }}" type='text/css' media='all'>
-{{- end }}
-
 <!-- Favicon -->
 <link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">