Merge pull request #268 from ErichDonGubler/sass-docs

Add docs for Sass processing
This commit is contained in:
Vincent Prouillet 2018-03-23 19:02:27 +01:00 committed by GitHub
commit f0fe4541ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 0 deletions

View file

@ -17,6 +17,7 @@ Content
- Internal links & deep linking
- Table of contents
- Syntax highlighting
- Sass
Templates
- Intro

View file

@ -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.