Jekyll Sass Converter

Let Jekyll build your Sass and SCSS!

Jekyll Sass Converter requires Jekyll 2.0.0 or greater and is bundled with Jekyll so you don't need to install it if you're already using Jekyll.

Add this line to your application's Gemfile:

gem 'jekyll-sass-converter'

And then execute:

$ bundle

Or install it yourself as:

$ gem install jekyll-sass-converter

Jekyll Sass Converter comes bundled with Jekyll 2.0.0 and greater. For more information about usage, visit the Jekyll Assets Documentation page.

Starting with v3.0, Jekyll Sass Converter uses sass-embedded for Sass implementation.

Please see migrate from 2.x to 3.x for more information.

sass-embedded is a host for the Sass embedded protocol.

The host runs Dart Sass compiler as a subprocess and communicates with the dart-sass compiler by sending / receiving protobuf messages via the standard input-output channel.

Starting with v2.0, the Converter will by default generate a source map file along with the .css output file. The source map is useful when we use the web developers tools of Chrome or Firefox to debug our .sass or .scss stylesheets.

The source map is a file that maps from the output .css file to the original source .sass or .scss style sheets. Thus enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

Configuration options are specified in the _config.yml file in the following way:

sass:
  <option_name1>: <option_value1>
  <option_name2>: <option_value2>

Available options are:

• style

  Sets the style of the CSS-output. Can be compressed or expanded. See the SASS_REFERENCE for details.

  Defaults to expanded.

• sass_dir

  A filesystem-path which should be searched for Sass partials.

  Defaults to _sass

• load_paths

  An array of additional filesystem-paths which should be searched for Sass partials.

  Defaults to []

• sourcemap

  Controls when source maps shall be generated.

  • never — causes no source maps to be generated at all.
  • always — source maps will always be generated.
  • development — source maps will only be generated if the site is in development environment. That is, when the environment variable JEKYLL_ENV is set to development.

  Defaults to always.

• quiet_deps

  If this option is set to true, Sass won’t print warnings that are caused by dependencies. A “dependency” is defined as any file that’s loaded through sass_dir or load_paths. Stylesheets that are imported relative to the entrypoint are not considered dependencies.

  Defaults to false.

• verbose

  By default, Dart Sass will print only five instances of the same deprecation warning per compilation to avoid deluging users in console noise. If you set verbose to true, it will instead print every deprecation warning it encounters.

  Defaults to false.

Classic GitHub Pages experience still uses 1.x version of jekyll-sass-converter.

To use latest Jekyll and Jekyll Sass Converter on GitHub Pages, you can now deploy to a GitHub Pages site using GitHub Actions.

• Minimum Ruby Version: Ruby 2.6.0 (all platforms).
• Minimum Rubygems Version: 3.3.22 (for Linux-based platforms).

In v3.0.0, sass-embedded gem becomes the default Sass implementation, and sassc gem is no longer supported. As part of this change, support for Ruby 2.5 is dropped.

The Converter will no longer emit @charset "UTF-8"; or a U+FEFF (byte-order marker) for sassify and scssify Jekyll filters so that this option is no longer needed.

sass-embedded does not support line_comments option.

sass-embedded only allows importing files that have extension names of .sass, .scss or .css. Scss syntax in files with .css extension name will result in a syntax error.

In v2.x, the Converter allowed imports using paths relative to site source directory, even if the site source directory is not in Sass load_paths. This is a side effect of a bug in the Converter, which will remain as is in v2.x due to its usage in the wild.

In v3.x, imports using paths relative to site source directory will not work out of box. To allow these imports, . (meaning current directory, or site source directory) need to be explicitly added to load_paths option.

In v2.x, the Converter allowed imports of files with the same filename as their parent file from sass_dir or load_paths. This is a side effect of a bug in the Converter, which will remain as is in v2.x due to its usage in the wild.

In v3.x, imports using the same filename of parent file will create a circular import. To fix these imports, rename either of the files, or use complete relative path from the parent file.

Please see https://github.com/sass/dart-sass#behavioral-differences-from-ruby-sass.

1. Fork it ( https://github.com/jekyll/jekyll-sass-converter/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request