Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem. In order to use them, you must first create a file with the proper extension name (one of
.coffee) and start the file with two lines of triple dashes, like this:
--- --- // start content .my-definition font-size: 1.2em
Jekyll treats these files the same as a regular page, in that the output file will be placed in the same directory that it came from. For instance, if you have a file named
css/styles.scss in your site’s source folder, Jekyll will process it and put it in your site’s destination folder under
Jekyll processes all Liquid filters and tags in asset files
Jekyll allows you to customize your Sass conversion in certain ways.
Place all your partials in your
sass_dir, which defaults to
<source>/_sass. Place your main SCSS or Sass files in the place you want them to be in the output file, such as
<source>/css. For an example, take a look at this example site using Sass support in Jekyll.
If you are using Sass
@import statements, you’ll need to ensure that your
sass_dir is set to the base directory that contains your Sass files. You can do that thusly:
sass: sass_dir: _sass
The Sass converter will default the
sass_dir configuration option to
sass_diris only used by Sass
Note that the
sass_dirbecomes the load path for Sass imports, nothing more. This means that Jekyll does not know about these files directly, so any files here should not contain the YAML Front Matter as described above nor will they be transformed as described above. This folder should only contain imports.
You may also specify the output style with the
style option in your
sass: style: compressed
These are passed to Sass, so any output style options Sass supports are valid here, too.
To enable Coffeescript in Jekyll 3.0 and up you must
_config.ymlis up-to-date and includes the following:
plugins: - jekyll-coffeescript
© 2008–2018 Tom Preston-Werner and Jekyll contributors
Licensed under the MIT license.