Merge pull request #1932 from jekyll/sass
This commit is contained in:
commit
5b7a53b543
|
@ -34,6 +34,7 @@ Gem::Specification.new do |s|
|
||||||
s.add_runtime_dependency('colorator', "~> 0.1")
|
s.add_runtime_dependency('colorator', "~> 0.1")
|
||||||
s.add_runtime_dependency('redcarpet', "~> 3.0")
|
s.add_runtime_dependency('redcarpet', "~> 3.0")
|
||||||
s.add_runtime_dependency('toml', '~> 0.1.0')
|
s.add_runtime_dependency('toml', '~> 0.1.0')
|
||||||
|
s.add_runtime_dependency('sass', '~> 3.2')
|
||||||
|
|
||||||
s.add_development_dependency('rake', "~> 10.1")
|
s.add_development_dependency('rake', "~> 10.1")
|
||||||
s.add_development_dependency('rdoc', "~> 3.11")
|
s.add_development_dependency('rdoc', "~> 3.11")
|
||||||
|
|
|
@ -27,6 +27,7 @@ require 'liquid'
|
||||||
require 'maruku'
|
require 'maruku'
|
||||||
require 'colorator'
|
require 'colorator'
|
||||||
require 'toml'
|
require 'toml'
|
||||||
|
require 'sass'
|
||||||
|
|
||||||
# internal requires
|
# internal requires
|
||||||
require 'jekyll/core_ext'
|
require 'jekyll/core_ext'
|
||||||
|
|
|
@ -0,0 +1,58 @@
|
||||||
|
module Jekyll
|
||||||
|
class Sass < Converter
|
||||||
|
safe true
|
||||||
|
priority :low
|
||||||
|
|
||||||
|
def matches(ext)
|
||||||
|
ext =~ /^\.s(a|c)ss$/i
|
||||||
|
end
|
||||||
|
|
||||||
|
def output_ext(ext)
|
||||||
|
".css"
|
||||||
|
end
|
||||||
|
|
||||||
|
def jekyll_sass_configuration
|
||||||
|
@config["sass"] || {}
|
||||||
|
end
|
||||||
|
|
||||||
|
def sass_build_configuration_options(overrides)
|
||||||
|
jekyll_sass_configuration.deep_merge(overrides).symbolize_keys
|
||||||
|
end
|
||||||
|
|
||||||
|
def syntax_type_of_content(content)
|
||||||
|
if content.include?(";") || content.include?("{")
|
||||||
|
:scss
|
||||||
|
else
|
||||||
|
:sass
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def sass_dir
|
||||||
|
return "_sass" if jekyll_sass_configuration["sass_dir"].to_s.empty?
|
||||||
|
jekyll_sass_configuration["sass_dir"]
|
||||||
|
end
|
||||||
|
|
||||||
|
def sass_dir_relative_to_site_source
|
||||||
|
File.join(
|
||||||
|
@config["source"],
|
||||||
|
File.expand_path(sass_dir, "/") # FIXME: Not windows-compatible
|
||||||
|
)
|
||||||
|
end
|
||||||
|
|
||||||
|
def allow_caching?
|
||||||
|
!@config["safe"]
|
||||||
|
end
|
||||||
|
|
||||||
|
def sass_configs(content = "")
|
||||||
|
sass_build_configuration_options({
|
||||||
|
"syntax" => syntax_type_of_content(content),
|
||||||
|
"cache" => allow_caching?,
|
||||||
|
"load_paths" => [sass_dir_relative_to_site_source]
|
||||||
|
})
|
||||||
|
end
|
||||||
|
|
||||||
|
def convert(content)
|
||||||
|
::Sass.compile(content, sass_configs(content))
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
|
@ -15,6 +15,7 @@
|
||||||
- pages
|
- pages
|
||||||
- variables
|
- variables
|
||||||
- datafiles
|
- datafiles
|
||||||
|
- assets
|
||||||
- migrations
|
- migrations
|
||||||
|
|
||||||
- title: Customization
|
- title: Customization
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
---
|
||||||
|
layout: docs
|
||||||
|
title: Assets
|
||||||
|
prev_section: datafiles
|
||||||
|
next_section: migrations
|
||||||
|
permalink: /docs/assets/
|
||||||
|
---
|
||||||
|
|
||||||
|
Jekyll provides built-in support for Sass and CoffeeScript. In order to use
|
||||||
|
them, create a file with the proper extension name (one of `.sass`, `.scss`,
|
||||||
|
or `.coffee`) and start the file with two lines of triple dashes, like this:
|
||||||
|
|
||||||
|
{% highlight sass %}
|
||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
// start content
|
||||||
|
.my-definition
|
||||||
|
font-size: 1.2em
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
## Sass/SCSS
|
||||||
|
|
||||||
|
Jekyll allows you to customize your Sass conversion in certain ways.
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
{% highlight yaml %}
|
||||||
|
sass:
|
||||||
|
sass_dir: _sass
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
The Sass converter will default to `_sass`.
|
||||||
|
|
||||||
|
You may also specify the output style with the `style` option in your
|
||||||
|
`_config.yml` file:
|
||||||
|
|
||||||
|
{% highlight yaml %}
|
||||||
|
sass:
|
||||||
|
style: :compressed
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
These are passed to Sass, so any output style options Sass supports are valid
|
||||||
|
here, too.
|
|
@ -2,7 +2,7 @@
|
||||||
layout: docs
|
layout: docs
|
||||||
title: Data Files
|
title: Data Files
|
||||||
prev_section: variables
|
prev_section: variables
|
||||||
next_section: migrations
|
next_section: assets
|
||||||
permalink: /docs/datafiles/
|
permalink: /docs/datafiles/
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
layout: docs
|
layout: docs
|
||||||
title: Blog migrations
|
title: Blog migrations
|
||||||
prev_section: datafiles
|
prev_section: assets
|
||||||
next_section: templates
|
next_section: templates
|
||||||
permalink: /docs/migrations/
|
permalink: /docs/migrations/
|
||||||
---
|
---
|
||||||
|
|
|
@ -0,0 +1,107 @@
|
||||||
|
require 'helper'
|
||||||
|
|
||||||
|
class TestSass < Test::Unit::TestCase
|
||||||
|
def site_configuration(overrides = {})
|
||||||
|
Jekyll::Configuration::DEFAULTS.deep_merge(overrides).deep_merge({
|
||||||
|
"source" => source_dir,
|
||||||
|
"destination" => dest_dir
|
||||||
|
})
|
||||||
|
end
|
||||||
|
|
||||||
|
def converter(overrides = {})
|
||||||
|
Jekyll::Sass.new(site_configuration({"sass" => overrides}))
|
||||||
|
end
|
||||||
|
|
||||||
|
def sass_content
|
||||||
|
<<-SASS
|
||||||
|
$font-stack: Helvetica, sans-serif
|
||||||
|
body
|
||||||
|
font-family: $font-stack
|
||||||
|
font-color: fuschia
|
||||||
|
SASS
|
||||||
|
end
|
||||||
|
|
||||||
|
def scss_content
|
||||||
|
<<-SCSS
|
||||||
|
$font-stack: Helvetica, sans-serif;
|
||||||
|
body {
|
||||||
|
font-family: $font-stack;
|
||||||
|
font-color: fuschia;
|
||||||
|
}
|
||||||
|
SCSS
|
||||||
|
end
|
||||||
|
|
||||||
|
def css_output
|
||||||
|
<<-CSS
|
||||||
|
body {\n font-family: Helvetica, sans-serif;\n font-color: fuschia; }
|
||||||
|
CSS
|
||||||
|
end
|
||||||
|
|
||||||
|
context "matching file extensions" do
|
||||||
|
should "match .scss files" do
|
||||||
|
assert converter.matches(".scss")
|
||||||
|
end
|
||||||
|
|
||||||
|
should "match .sass files" do
|
||||||
|
assert converter.matches(".sass")
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
context "determining the output file extension" do
|
||||||
|
should "always outputs the .css file extension" do
|
||||||
|
assert_equal ".css", converter.output_ext(".always-css")
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
context "when building configurations" do
|
||||||
|
should "not allow caching in safe mode" do
|
||||||
|
verter = converter
|
||||||
|
verter.instance_variable_get(:@config)["safe"] = true
|
||||||
|
assert_equal false, verter.sass_configs[:cache]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "allow caching in unsafe mode" do
|
||||||
|
assert_equal true, converter.sass_configs[:cache]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "set the load paths to the _sass dir relative to site source" do
|
||||||
|
assert_equal [source_dir("_sass")], converter.sass_configs[:load_paths]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "allow the user to specify a different sass dir" do
|
||||||
|
assert_equal [source_dir("_scss")], converter({"sass_dir" => "_scss"}).sass_configs[:load_paths]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "set syntax :scss when SCSS content" do
|
||||||
|
assert_equal :scss, converter.sass_configs(scss_content)[:syntax]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "set syntax :sass when Sass content" do
|
||||||
|
assert_equal :sass, converter.sass_configs(sass_content)[:syntax]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "default to :sass syntax when content is empty" do
|
||||||
|
assert_equal :sass, converter.sass_configs[:syntax]
|
||||||
|
end
|
||||||
|
|
||||||
|
should "not allow sass_dirs outside of site source" do
|
||||||
|
assert_equal source_dir("etc/passwd"), converter({"sass_dir" => "/etc/passwd"}).sass_dir_relative_to_site_source
|
||||||
|
end
|
||||||
|
|
||||||
|
should "override user-set syntax based on content" do
|
||||||
|
assert_equal :sass, converter({"syntax" => :scss}).sass_configs(sass_content)[:syntax]
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
context "converting sass" do
|
||||||
|
should "produce CSS" do
|
||||||
|
assert_equal css_output, converter.convert(sass_content)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
context "converting SCSS" do
|
||||||
|
should "produce CSS" do
|
||||||
|
assert_equal css_output, converter.convert(scss_content)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
Loading…
Reference in New Issue