From 110e846fbe44c5b3c30104328046cec75f0ade52 Mon Sep 17 00:00:00 2001 From: Erich Gubler Date: Thu, 22 Mar 2018 15:46:40 -0600 Subject: [PATCH 1/3] Docs: add an entry for Sass processing in the main Content section --- docs/content/documentation/content/sass.md | 42 ++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 docs/content/documentation/content/sass.md diff --git a/docs/content/documentation/content/sass.md b/docs/content/documentation/content/sass.md new file mode 100644 index 00000000..45e27f43 --- /dev/null +++ b/docs/content/documentation/content/sass.md @@ -0,0 +1,42 @@ ++++ +title = "Sass" +weight = 110 ++++ + +Sass is a popular CSS extension language that approaches some of the harder +parts of maintaining large sets of CSS rules. If you're curious about what Sass +is and why it might be useful for styling your static site, the following links +may be of interest: + +* The [official Sass website](http://sass-lang.com/) +* [Why Sass?](https://alistapart.com/article/why-sass), by Dan Cederholm + +## Using Sass in Gutenberg + +Gutenberg processes any files with the `sass` or `scss` extensions in the `sass` +folder, and places the processed output into a `css` file with the same folder +structure and base name into the `public` folder: + +```bash +. +└── sass + ├── style.scss // -> ./public/style.css + ├── indented_style.sass // -> ./public/indented_style.css + ├── _include.scss // This file won't get put into the `public` folder, but other files can @import it. + ├── assets + │ ├── fancy.scss // -> ./public/assets/fancy.css + │ ├── same_name.scss // -> ./public/assets/same_name.css + │ ├── same_name.sass // CONFLICT! This has the same base name as the file above, so Gutenberg will return an error. + │ └── _common_mixins.scss // This file won't get put into the `public` folder, but other files can @import it. + └── secret-side-project + └── style.scss // -> ./public/secret-side-project/fancy.css +``` + +Files with a leading underscore in the name are not placed into the `public` +folder, but can still be used as `@import` dependencies. For more information, see the "Partials" section of +[Sass Basics](https://sass-lang.com/guide#partials). + +Files with the `scss` extension use ["Sassy CSS" syntax](http://sass-lang.com/documentation/#Formatting), +while files with the `sass` extension use the ["indented" syntax](http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html). +Gutenberg will return an error if a `scss` and `sass` file exist with the same +base name in the same folder to avoid confusion -- see the example above. From b38a50409463975b4cb121097d3cd6d3afa89491 Mon Sep 17 00:00:00 2001 From: Erich Gubler Date: Thu, 22 Mar 2018 15:47:34 -0600 Subject: [PATCH 2/3] Update _index.md --- docs/content/documentation/_index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/documentation/_index.md b/docs/content/documentation/_index.md index 216fac9c..ce250852 100644 --- a/docs/content/documentation/_index.md +++ b/docs/content/documentation/_index.md @@ -17,6 +17,7 @@ Content - Internal links & deep linking - Table of contents - Syntax highlighting + - Sass Templates - Intro From 72d50eed7f25f9a29b7d1a4f7683d62bfbf7264d Mon Sep 17 00:00:00 2001 From: Erich Gubler Date: Fri, 23 Mar 2018 08:52:05 -0600 Subject: [PATCH 3/3] Sass docs: try replacing `//` comments with `#` comments when they don't indicate output paths, try to resolve single-quote issue --- docs/content/documentation/content/sass.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/documentation/content/sass.md b/docs/content/documentation/content/sass.md index 45e27f43..e6620f32 100644 --- a/docs/content/documentation/content/sass.md +++ b/docs/content/documentation/content/sass.md @@ -22,12 +22,12 @@ structure and base name into the `public` folder: └── sass ├── style.scss // -> ./public/style.css ├── indented_style.sass // -> ./public/indented_style.css - ├── _include.scss // This file won't get put into the `public` folder, but other files can @import it. + ├── _include.scss # This file won't get put into the `public` folder, but other files can @import it. ├── assets │ ├── fancy.scss // -> ./public/assets/fancy.css │ ├── same_name.scss // -> ./public/assets/same_name.css - │ ├── same_name.sass // CONFLICT! This has the same base name as the file above, so Gutenberg will return an error. - │ └── _common_mixins.scss // This file won't get put into the `public` folder, but other files can @import it. + │ ├── same_name.sass # CONFLICT! This has the same base name as the file above, so Gutenberg will return an error. + │ └── _common_mixins.scss # This file won't get put into the `public` folder, but other files can @import it. └── secret-side-project └── style.scss // -> ./public/secret-side-project/fancy.css ```