Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use Hugo to generate CSS from SASS #13113

Merged
merged 1 commit into from
Jun 9, 2019
Merged

Use Hugo to generate CSS from SASS #13113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
**/.DS_Store
**/desktop.ini
_site/**
.sass-cache/**
CNAME
.travis.yml
.idea/
Expand Down
2 changes: 1 addition & 1 deletion Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 1 addition & 7 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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

Expand Down
0 sass/OWNERS → assets/sass/OWNERS
View file
Open in desktop
File renamed without changes.
0 sass/_base.sass → assets/sass/_base.sass
View file
Open in desktop
File renamed without changes.
0 sass/_case-studies.sass → assets/sass/_case-studies.sass
View file
Open in desktop
File renamed without changes.
0 sass/_desktop.sass → assets/sass/_desktop.sass
View file
Open in desktop
File renamed without changes.
0 sass/_reset.sass → assets/sass/_reset.sass
View file
Open in desktop
File renamed without changes.
0 sass/_size.sass → assets/sass/_size.sass
View file
Open in desktop
File renamed without changes.
0 sass/_skin.sass → assets/sass/_skin.sass
View file
Open in desktop
File renamed without changes.
0 sass/_tablet.sass → assets/sass/_tablet.sass
View file
Open in desktop
File renamed without changes.
6 changes: 4 additions & 2 deletions sass/case-study-styles.sass → assets/sass/style.sass
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}
2 changes: 1 addition & 1 deletion content/en/docs/contribute/style/content-organization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}}

Expand Down
15 changes: 14 additions & 1 deletion layouts/partials/css.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
{{ $inServerMode := site.IsServer }}
{{ $sass := "sass/style.sass" }}
{{ $cssOutput := "css/style.css" }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hello, @lucperkins. I may have misunderstood, but is $sass set to the file sass/style.sass, and sass/style.sass is being removed as part of this commit? Also, are there any benefits to using postCSS instead?

Copy link
Contributor Author

@lucperkins lucperkins Jun 5, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kbhawkey Here, sass/style.sass refers to the file in assets/sass/style.sass, which is not being removed. The assets directory is what Hugo uses as its reference point for Sass processing, much like it uses static for static assets, content for Markdown sources, etc.

As for PostCSS, I'm afraid I don't quite understand the question. As far as I know, PostCSS is not used to convert Sass to CSS.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, thanks for the info. I am reading up on the sass processing/hugo pipes in the hugo docs and came across postcss-cli. Just wondering if that is a separate processing step, after sass conversion to css, and if it would be worthwhile to consider.

Copy link
Contributor Author

@lucperkins lucperkins Jun 5, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kbhawkey Yes, PostCSS is a separate step and has a variety of plugins for things like cross-browser compatibility, pruning unused CSS classes, etc. Worth exploring in the future but would be a supplement to the changes here and should be considered separately, I think.

{{ $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 }}
Expand Down
7 changes: 0 additions & 7 deletions sass/styles.sass
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions scripts/sass.sh
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion static/css/case-study-styles.css
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions static/css/case-study-styles.css.map
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion static/css/styles.css
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions static/css/styles.css.map
View file
Open in desktop

This file was deleted.