|
| 1 | +--- |
| 2 | +title: Assets |
| 3 | +permalink: /docs/assets/ |
| 4 | +--- |
| 5 | + |
| 6 | +Jekyll provides built-in support for Sass and can work with CoffeeScript via |
| 7 | +a Ruby gem. In order to use them, you must first create a file with the |
| 8 | +proper extension name (one of `.sass`, `.scss`, or `.coffee`) and ***start the |
| 9 | +file with two lines of triple dashes***, like this: |
| 10 | + |
| 11 | +```sass |
| 12 | +--- |
| 13 | +--- |
| 14 | +
|
| 15 | +// start content |
| 16 | +.my-definition |
| 17 | + font-size: 1.2em |
| 18 | +``` |
| 19 | + |
| 20 | +Jekyll treats these files the same as a regular page, in that the output file |
| 21 | +will be placed in the same directory that it came from. For instance, if you |
| 22 | +have a file named `css/styles.scss` in your site's source folder, Jekyll |
| 23 | +will process it and put it in your site's destination folder under |
| 24 | +`css/styles.css`. |
| 25 | + |
| 26 | +<div class="note info"> |
| 27 | + <h5>Jekyll processes all Liquid filters and tags in asset files</h5> |
| 28 | + <p>If you are using <a href="https://mustache.github.io">Mustache</a> |
| 29 | + or another JavaScript templating language that conflicts with |
| 30 | + the <a href="/docs/templates/">Liquid template syntax</a>, you |
| 31 | + will need to place <code>{% raw %}</code> and |
| 32 | + <code>{% endraw %}</code> tags around your code.</p> |
| 33 | +</div> |
| 34 | + |
| 35 | +## Sass/SCSS |
| 36 | + |
| 37 | +Jekyll allows you to customize your Sass conversion in certain ways. |
| 38 | + |
| 39 | +Place all your partials in your `sass_dir`, which defaults to |
| 40 | +`<source>/_sass`. Place your main SCSS or Sass files in the place you want |
| 41 | +them to be in the output file, such as `<source>/css`. For an example, take |
| 42 | +a look at [this example site using Sass support in Jekyll][example-sass]. |
| 43 | + |
| 44 | +If you are using Sass `@import` statements, you'll need to ensure that your |
| 45 | +`sass_dir` is set to the base directory that contains your Sass files. You |
| 46 | +can do that thusly: |
| 47 | + |
| 48 | +```yaml |
| 49 | +sass: |
| 50 | + sass_dir: _sass |
| 51 | +``` |
| 52 | +
|
| 53 | +The Sass converter will default the `sass_dir` configuration option to |
| 54 | +`_sass`. |
| 55 | + |
| 56 | +[example-sass]: https://github.com/jekyll/jekyll-sass-converter/tree/master/example |
| 57 | + |
| 58 | +<div class="note info"> |
| 59 | + <h5>The <code>sass_dir</code> is only used by Sass</h5> |
| 60 | + <p> |
| 61 | + |
| 62 | + Note that the <code>sass_dir</code> becomes the load path for Sass imports, |
| 63 | + nothing more. This means that Jekyll does not know about these files |
| 64 | + directly, so any files here should not contain the YAML Front Matter as |
| 65 | + described above nor will they be transformed as described above. This |
| 66 | + folder should only contain imports. |
| 67 | + |
| 68 | + </p> |
| 69 | +</div> |
| 70 | + |
| 71 | +You may also specify the output style with the `style` option in your |
| 72 | +`_config.yml` file: |
| 73 | + |
| 74 | +```yaml |
| 75 | +sass: |
| 76 | + style: compressed |
| 77 | +``` |
| 78 | + |
| 79 | +These are passed to Sass, so any output style options Sass supports are valid |
| 80 | +here, too. |
| 81 | + |
| 82 | + |
| 83 | +## Coffeescript |
| 84 | + |
| 85 | +To enable Coffeescript in Jekyll 3.0 and up you must |
| 86 | + |
| 87 | +* Install the `jekyll-coffeescript` gem |
| 88 | +* Ensure that your `_config.yml` is up-to-date and includes the following: |
| 89 | + |
| 90 | +```yaml |
| 91 | +gems: |
| 92 | + - jekyll-coffeescript |
| 93 | +``` |
0 commit comments