jekyll / jekyll-sass-converter

A Sass converter for Jekyll.

Home Page:http://rubygems.org/gems/jekyll-sass-converter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add current processing sass file's directory to load path

robertjpayne opened this issue · comments

Currently any desired @import files must live in the shared global sass folder. For larger Jekyll setups this can create quite a clutter.

For my specific setup I am putting frameworks like Compass/Foundation(Zurb) etc.. in the sass folder and then putting my normal scss files in directories where I would normally.

However all imports must come from the global single shared sass folder. Sass supports multiple load paths and it'd be awesome if we could add the currently processing sass file's directory to the load path so it can import things that are sitting right beside it.

Well looking into doing this myself and submitting a pull request it's become pretty obvious that this is 100% impossible in Jekyll since converters are never given any information about the file be processed.

Furthermore it sucks the YML header is necessary just to trick Jekyll into thinking it's a page that needs to be run through the converters 👎

Well the only way I was able to accomplish this and in the process ditch the unecessary yaml headers was to dig into the static file class itself.

It'd be super awesome if Jekyll provided a plugin type specifically for handling static files of certain types that doesn't have to go through the yaml system.

require 'sass'
require 'jekyll/utils'

module SCSSStaticFile

  def write(dest)
    dest_path = destination(dest)
    dest_extname = File.extname(dest_path)

    # only prevent scss files
    if dest_extname == '.scss'
      dest_path = File.join(File.dirname(dest_path), File.basename(dest_path, '.scss') + '.css')

      return false if File.exists?(dest_path) and !modified?
      Jekyll::StaticFile.class_variable_get(:@@mtimes)[path] = mtime

      config = {
        syntax: :scss,
        cache: true,
        load_paths: [
          Jekyll.sanitized_path(@site.config['source'], '_scss'),
          File.dirname(path)
        ]
      }
      contents = File.open(path) { |fd| fd.read }
      contents = ::Sass.compile(contents, config)

      FileUtils.mkdir_p(File.dirname(dest_path))
      File.open(dest_path, 'w') { |fd| fd.write(contents) }

      true
    else
      super
    end
  end

end

module Jekyll
  class StaticFile
    prepend SCSSStaticFile
  end
end
commented

@robertjpayne What about using gems of external css sources only? So you can follow this way:

  1. Install all the gems of external css source, e.g. gem install bourbon.
  2. Put a file vendor-css.rb (or name it whatever you want) into Jekylls _plugins folder. It requires all the external css stuff, e.g. require 'bourbon'.
  3. Import all external css sources into your main sass file, e.g. @import 'bourbon'.

With #14, you can add custom load paths to the converter via _config.yml.

Are relative imports not possible via Sass directly?