add: feature of sass

assets/css/main.css

@@ -889,48 +889,3 @@ ul.footer-menu>li {
         max-width: 10em;
     }
 }
-
-    {
-        {
-        range site.Params.customCSS
-    }
-}
-
-    {
-        {
-        $custom : =resources.Get .
-    }
-}
-
-    {
-        {
-        $custom.Content
-    }
-}
-
-    {
-        {
-        end
-    }
-}
-
-    {
-        {
-        if site.Params.isso.enabled
-    }
-}
-
-#isso-thread .textarea {
-    color: #000;
-}
-
-#isso-thread .isso-feedlink {
-    position: relative;
-    z-index: 1;
-}
-
-    {
-        {
-        end
-    }
-}

exampleSiteMultilingual/assets/css/custom1.scss

@@ -0,0 +1,17 @@
+@import 'foundation/code';
+
+$font-stack: Helvetica, sans-serif;
+$primary-color: yellow;
+$background-color: pink;
+
+junyi {
+    font: 100% $font-stack;
+    color: $primary-color;
+    background-color: $background-color;
+}
+
+body .container {
+    max-width: none;
+    padding-left: 5em;
+    padding-right: 5em;
+}

exampleSiteMultilingual/assets/css/custom2.css

@@ -0,0 +1,7 @@
+.anubis-custom-style {
+    background-color: pink;
+    color: black;
+    padding: 1em;
+    border-radius: 0.3em;
+    border: 1px solid black;
+}

exampleSiteMultilingual/assets/css/foundation/_code.scss

@@ -0,0 +1,5 @@
+code {
+  padding: .25em;
+  line-height: 2;
+  background-color: rgb(189, 204, 255);
+}

exampleSiteMultilingual/content/posts/advanced-style.md

@@ -0,0 +1,42 @@
++++
+author = "Hugo Authors"
+title = "Advanced Style"
+date = "2024-04-09"
+description = "Guide to advanced usage of Anubis2"
+tags = [
+    "emoji",
+]
++++
+
+<div class="anubis-custom-style">
+The custom <code>.css</code> <code>.scss</code> <code>.sass</code> file should be placed in <code>assets/</code> folder. (instead of <code>static/</code>)
+</div>
+
+This page is affected by `assets/css/custom1.scss` and `assets/css/custom2.css`
+
+## How to use PoseCSS
+
+First, make sure your Hugo version supports Hugo Pipes. Hugo Pipes is available in Hugo `0.46` and later versions.
+
+Then, add the following content to your Hugo configuration file (such as config.toml) to enable PostCSS:
+
+```toml
+[build]
+  writeStats = true
+
+[params]
+  usePostCSS = true
+```
+
+In addition, you need to create a postcss.config.js file in the root directory of your project, with the following content:
+
+```js
+module.exports = {
+  plugins: [
+    require('postcss-import')(),
+    require('postcss-url')(),
+    require('autoprefixer')(),
+    // Add more PostCSS plugins here if needed
+  ]
+};
+```

exampleSiteMultilingual/hugo.toml

@@ -38,6 +38,8 @@ GiscusCategoryId = "DIC_kwDOLEp76c4CcbPS"
 GiscusLazyLoad = false
 GiscusDataMapping = "pathname"
 
+customCSS = ["css/custom1.scss", "css/custom2.css"]
+
 [[params.social]]
 id = "docs"
 url = "https://gohugo.io/documentation/"

layouts/partials/head.html

@@ -54,6 +54,29 @@
 {{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/light.css") }}
 {{ partial "resource.html" (dict "context" . "type" "css" "filename" "css/dark.css") }}
 
+
+{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+
+
+{{ range site.Params.customCSS }}
+    {{ with resources.Get . | toCSS $opts | minify | fingerprint }}
+      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
+    {{ end }}
+{{ end }}
+
+{{ if site.Params.isso.enabled }} {{/* TODO: maybe we can remove it */}}
+  <style>
+    #isso-thread .textarea {
+      color: #000;
+    }
+    #isso-thread .isso-feedlink {
+      position: relative;
+      z-index: 1;
+    }
+  </style>
+{{ end }}
+
+
 {{ if .Site.Params.copyCodeButton | default true }}
     {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/copy-code.js") }}
 {{ end }}