diff options
author | Bjørn Erik Pedersen <[email protected]> | 2023-12-04 15:14:18 +0100 |
---|---|---|
committer | Bjørn Erik Pedersen <[email protected]> | 2023-12-04 15:14:18 +0100 |
commit | 35dec7c96f7ee3eb17dd444f7067f0c776fb56ae (patch) | |
tree | f2fa4f4c1a0fe6bfd47cb84982d5f4a73bc306f2 /content/en/functions/resources/ToCSS.md | |
parent | aaaf1c8df5d6aa061609d20510f7fa6c42e5cc1a (diff) | |
download | hugo-35dec7c96f7ee3eb17dd444f7067f0c776fb56ae.tar.gz hugo-35dec7c96f7ee3eb17dd444f7067f0c776fb56ae.zip |
Squashed 'docs/' changes from 4d936aee6..4dd2d6415
4dd2d6415 Fix erroridf example
9ae8e9199 Clarify highlight options
f3943f9c8 Fix typo
b57ea5ac8 Add field to glossary of terms
3191e35b4 Clarify comment in the new-in shortcode
870c8d35c Correct description of Ref and RelRef page methods
c9df50e6e Specify encoding in description of crypto functions
749bb37e2 Add Ref, RelRef, and Site shortcode methods
994d4374b Update fmt functions
740f5ef96 Misc additions
77acdcdb6 Remove rssLimit from root config documentation
df84a1795 Document the openapi3.Unmarshal function
24236f57d Miscellaneous edits and corrections
41b54d421 Hide the "new in" button after some period of time
3c1ebac31 Update Ancestors.md
e699eb313 Add new-in tags to select functions and methods
5c41f0bf8 Clarify time.Format method
f7bd43ae1 Add link to built-in render hook for GoAT diagrams
06f9cd4c9 Document the diagrams.Goat function
5e432e12d Adjust quick reference weights
fc915efd6 Update FAQ
5bccf8b19 Use LinkTitle consistently in examples
36f207f3a Add page collection quick reference
699de883d Inlcude example of newScratch.Values
9bb7f8c78 Include RenderString example for emoji shortcodes
783fdd3ac Fix typo
26d5a4399 Fix typo
c7e86f0cf Fix typo
ad2a82fbd Clarify data type returned by partial and partialCached
1de5a52dd Miscellaneous corrections
3509e1b4d Update configuration-markup.md
8c6a9bf02 Clairfy figure shortcode output
c9d0dc8fb Update Markdownify.md
0c4bc1447 Update theme
0f0ab2ade Add methods deprecated in v0.120.0
e1c6ecd0f Miscellaneous edits
ec53b55b9 netlify: Hugo 0.120.4
23a1f3fd5 templates/internal.md: Correct GoogleAnalytics key name
6dcfa9a82 Update troubleshooting section
0c8857e8f Adjust code and code-toggle shortcodes
8820264d3 Reduce number of site audit warnings
526d06b90 Clarify hint option in image processing spec
310849daa Image Processing: Improve sentence and fix code sample
5bb67bfd4 Revert "Image Processing: Improve sentence and fix code sample" (#2318)
77c926fde Image Processing: Improve sentence and fix code sample
52179fb18 Miscellaneous edits
f4e886715 Revert change to hugo.work
c410fefa8 Update theme
8b72dfedd Rework where function documentation
f35a7126f Minor edits to global page function
903b42ebc Cleanup shortcode calls
c9247e98d Update documentation.md
dff3c4abb Clean up build option descriptions and examples
f46d31308 Use consistent signatures
2af2470b5 Minor correction to resources.GetRemote
45ec53fe0 Remove superfluous shortcode param
2a0544757 Improve deployment documentation
3cf36a7fc Clarify lang keyword
f10d6495d Update front-matter.md
dc94e20be Add Sveltia to CMS list
b15d6d670 Update front-ends.md
bb41588b2 Update FormatCurrency.md
b40fff396 Add showcase for hidden sections without index.html
71316e181 Improve image filter examples
d46f0b1d8 Miscellaneous edits
ad3f9cdb6 Adjust quick reference guides
8657804ba Update theme
d9e981147 Miscellaneous corrections
508666575 Miscellaneous updates
80b2241f9 Miscellaneous updates
723a827fd Namespace functions and methods
40212779a netlify: Hugo 0.120.3
66017c704 Bump GitHub workflows to latest versions
db0f1e682 Update related.md
7e758c23b netlify: Hugo 0.120.2
641ba3976 Update configuration.md
d2a9909d9 Update rss.md
7eb59d7a2 netlify: Hugo 0.120.1
708c351c4 Document debug.Timer
28e2388c2 Add new-in tag to images.Padding
ee24cffb5 Add new-in tags to hugo.IsDevelopment and hugo.IsServer
aa47ca023 netlify: Hugo 0.120.0
9c3e606fc docs: Regen docshelper
159fd971e commands/new: Remove format flag from new content cmd
9f7878092 Merge commit 'aaaf1c8df5d6aa061609d20510f7fa6c42e5cc1a'
65b2dd324 docs: Regenerate docshelper
2be620663 resources/images: Create padding image filter
c777d6c5e Merge commit '3710a5ec7efe6baca6e452f43632c05d22bab3c4'
24f2afeb2 Merge commit 'e509cac533600cf4fa8382c9cdab78ddd82db688'
3f947c19a hugolib: Deprecate .Site.DisqusShortname
6bd1af892 hugolib: Deprecate .Site.GoogleAnalytics
78becc6ee tpl/tplimpl: Deprecate .Site.Social usage with internal templates
e3ec2a4f2 common/hugo: Add hugo.IsServer and hugo.IsDevelopment
git-subtree-dir: docs
git-subtree-split: 4dd2d641531f74025ed9f51ea5a961e936988cfb
Diffstat (limited to 'content/en/functions/resources/ToCSS.md')
-rw-r--r-- | content/en/functions/resources/ToCSS.md | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/content/en/functions/resources/ToCSS.md b/content/en/functions/resources/ToCSS.md new file mode 100644 index 000000000..872bf996b --- /dev/null +++ b/content/en/functions/resources/ToCSS.md @@ -0,0 +1,224 @@ +--- +title: resources.ToCSS +description: Transpiles Sass to CSS. +categories: [] +keywords: [] +action: + aliases: [toCSS] + related: + - functions/resources/Fingerprint + - functions/resources/Minify + - functions/resources/PostCSS + - functions/resources/PostProcess + returnType: resource.Resource + signatures: ['resources.ToCSS [OPTIONS] RESOURCE'] +toc: true +--- + +```go-html-template +{{ with resources.Get "sass/main.scss" }} + {{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }} + {{ with . | toCSS $opts }} + {{ if hugo.IsDevelopment }} + <link rel="stylesheet" href="{{ .RelPermalink }}"> + {{ else }} + {{ with . | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> + {{ end }} + {{ end }} + {{ end }} +{{ end }} +``` + +Transpile Sass to CSS using the LibSass transpiler included in Hugo's extended edition, or [install Dart Sass](#dart-sass) to use the latest features of the Sass language. + +Sass has two forms of syntax: [SCSS] and [indented]. Hugo supports both. + +[scss]: https://sass-lang.com/documentation/syntax#scss +[indented]: https://sass-lang.com/documentation/syntax#the-indented-syntax + +## Options + +transpiler +: (`string`) The transpiler to use, either `libsass` (default) or `dartsass`. Hugo's extended edition includes the LibSass transpiler. To use the Dart Sass transpiler, see the [installation instructions](#dart-sass) below. + +targetPath +: (`string`) If not set, the transformed resource's target path will be the original path of the asset file with its extension replaced by `.css`. + +vars +: (`map`) A map of key/value pairs that will be available in the `hugo:vars` namespace. Useful for [initializing Sass variables from Hugo templates](https://discourse.gohugo.io/t/42053/). + +```scss +// LibSass +@import "hugo:vars"; + +// Dart Sass +@use "hugo:vars" as v; +``` + +outputStyle +: (`string`) Output styles available to LibSass include `nested` (default), `expanded`, `compact`, and `compressed`. Output styles available to Dart Sass include `expanded` (default) and `compressed`. + +precision +: (`int`) Precision of floating point math. Not applicable to Dart Sass. + +enableSourceMap +: (`bool`) If `true`, generates a source map. + +sourceMapIncludeSources +: (`bool`) If `true`, embeds sources in the generated source map. Not applicable to LibSass. + +includePaths +: (`slice`) A slice of paths, relative to the project root, that the transpiler will use when resolving `@use` and `@import` statements. + +```go-html-template +{{ $opts := dict + "transpiler" "dartsass" + "targetPath" "css/style.css" + "vars" site.Params.styles + "enableSourceMap" (not hugo.IsProduction) + "includePaths" (slice "node_modules/bootstrap/scss") +}} +{{ with resources.Get "sass/main.scss" | toCSS $opts | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> +{{ end }} +``` + +## Dart Sass + +The extended version of Hugo includes [LibSass] to transpile Sass to CSS. In 2020, the Sass team deprecated LibSass in favor of [Dart Sass]. + +Use the latest features of the Sass language by installing Dart Sass in your development and production environments. + +### Installation overview + +Dart Sass is compatible with Hugo v0.114.0 and later. + +If you have been using Embedded Dart Sass[^1] with Hugo v0.113.0 and earlier, uninstall Embedded Dart Sass, then install Dart Sass. If you have installed both, Hugo will use Dart Sass. + +If you install Hugo as a [Snap package] there is no need to install Dart Sass. The Hugo Snap package includes Dart Sass. + +[^1]: In 2023, the Sass team deprecated Embedded Dart Sass in favor of Dart Sass. + +### Installing in a development environment + +When you install Dart Sass somewhere in your PATH, Hugo will find it. + +OS|Package manager|Site|Installation +:--|:--|:--|:-- +Linux|Homebrew|[brew.sh]|`brew install sass/sass/sass` +Linux|Snap|[snapcraft.io]|`sudo snap install dart-sass` +macOS|Homebrew|[brew.sh]|`brew install sass/sass/sass` +Windows|Chocolatey|[chocolatey.org]|`choco install sass` +Windows|Scoop|[scoop.sh]|`scoop install sass` + +You may also install [prebuilt binaries] for Linux, macOS, and Windows. + +Run `hugo env` to list the active transpilers. + +### Installing in a production environment + +For [CI/CD] deployments (e.g., GitHub Pages, GitLab Pages, Netlify, etc.) you must edit the workflow to install Dart Sass before Hugo builds the site[^2]. Some providers allow you to use one of the package managers above, or you can download and extract one of the prebuilt binaries. + +[^2]: You do not have to do this if (a) you have not modified the assets cache location, and (b) you have not set `useResourceCacheWhen` to `never` in your [site configuration], and (c) you add and commit your resources directory to your repository. + +#### GitHub Pages + +To install Dart Sass for your builds on GitHub Pages, add this step to the GitHub Pages workflow file: + +```yaml +- name: Install Dart Sass + run: sudo snap install dart-sass +``` + +If you are using GitHub Pages for the first time with your repository, GitHub provides a [starter workflow] for Hugo that includes Dart Sass. This is the simplest way to get started. + +#### GitLab Pages + +To install Dart Sass for your builds on GitLab Pages, the `.gitlab-ci.yml` file should look something like this: + +```yaml +variables: + HUGO_VERSION: 0.115.1 + DART_SASS_VERSION: 1.63.6 + GIT_DEPTH: 0 + GIT_STRATEGY: clone + GIT_SUBMODULE_STRATEGY: recursive + TZ: America/Los_Angeles +image: + name: golang:1.20-buster +pages: + script: + # Install Dart Sass + - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - cp -r dart-sass/* /usr/local/bin + - rm -rf dart-sass* + # Install Hugo + - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb + - apt install -y ./hugo_extended_${HUGO_VERSION}_linux-amd64.deb + - rm hugo_extended_${HUGO_VERSION}_linux-amd64.deb + # Build + - hugo --gc --minify + artifacts: + paths: + - public + rules: + - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH +``` + +#### Netlify + +To install Dart Sass for your builds on Netlify, the `netlify.toml` file should look something like this: + +```toml +[build.environment] +HUGO_VERSION = "0.115.1" +DART_SASS_VERSION = "1.63.6" +TZ = "America/Los_Angeles" + +[build] +publish = "public" +command = """\ + curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + export PATH=/opt/build/repo/dart-sass:$PATH && \ + hugo --gc --minify \ + """ +``` + +### Example + +To transpile with Dart Sass, set `transpiler` to `dartsass` in the options map passed to `resources.ToCSS`. For example: + +```go-html-template +{{ with resources.Get "sass/main.scss" }} + {{ $opts := dict "transpiler" "dartsass" "targetPath" "css/style.css" }} + {{ with . | toCSS $opts }} + {{ if hugo.IsDevelopment }} + <link rel="stylesheet" href="{{ .RelPermalink }}"> + {{ else }} + {{ with . | minify | fingerprint }} + <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> + {{ end }} + {{ end }} + {{ end }} +{{ end }} +``` + +### Miscellaneous + +If you build Hugo from source and run `mage test -v`, the test will fail if you install Dart Sass as a Snap package. This is due to the Snap package's strict confinement model. + +[brew.sh]: https://brew.sh/ +[chocolatey.org]: https://community.chocolatey.org/packages/sass +[ci/cd]: https://en.wikipedia.org/wiki/CI/CD +[dart sass]: https://sass-lang.com/dart-sass +[libsass]: https://sass-lang.com/libsass +[prebuilt binaries]: https://github.com/sass/dart-sass/releases/latest +[scoop.sh]: https://scoop.sh/#/apps?q=sass +[site configuration]: /getting-started/configuration/#configure-build +[snap package]: /installation/linux/#snap +[snapcraft.io]: https://snapcraft.io/dart-sass +[starter workflow]: https://github.com/actions/starter-workflows/blob/main/pages/hugo.yml |