<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Jekyll v3.4.0">
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites">
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic,900">
<link rel="stylesheet" href="/css/screen.css">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Begin Jekyll SEO tag v2.1.0 -->
<title>Assets - Jekyll • Simple, blog-aware, static sites</title>
<meta property="og:title" content="Assets">
<meta name="description" content="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 .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:">
<meta property="og:description" content="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 .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:">
<link rel="canonical" href="https://jekyllrb.com/docs/assets/">
<meta property="og:url" content="https://jekyllrb.com/docs/assets/">
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2017-03-22T08:06:48-07:00">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jekyllrb">
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY">
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "Assets",
"datePublished": "2017-03-22T08:06:48-07:00",
"description": "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 .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:",
"publisher": {"@type": "Organization",
"logo": {"@type": "ImageObject",
"url": "https://jekyllrb.com/img/logo-2x.png"}},
"url": "https://jekyllrb.com/docs/assets/"}</script>
<!-- End Jekyll SEO tag -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body class="wrap">
<header>
<nav class="mobile-nav show-on-mobiles">
<ul>
<li class="">
<a href="/">Home</a>
</li>
<li class="current">
<a href="/docs/home/">Docs</a>
</li>
<li class="">
<a href="/news/">News</a>
</li>
<li class="">
<a href="/community/">Community</a>
</li>
<li class="">
<a href="/help/">Help</a>
</li>
<li>
<a href="https://github.com/jekyll/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
</li>
</ul>
</nav>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<h1>
<a href="/">
<span class="sr-only">Jekyll</span>
<img src="/img/logo-2x.png" width="249" height="115" alt="Jekyll Logo">
</a>
</h1>
</div>
<nav class="main-nav unit two-thirds hide-on-mobiles">
<ul>
<li class="">
<a href="/">Home</a>
</li>
<li class="current">
<a href="/docs/home/">Docs</a>
</li>
<li class="">
<a href="/news/">News</a>
</li>
<li class="">
<a href="/community/">Community</a>
</li>
<li class="">
<a href="/help/">Help</a>
</li>
<li>
<a href="https://github.com/jekyll/jekyll"><span class="hide-on-mobiles">View on </span>GitHub</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="docs">
<div class="grid">
<div class="docs-nav-mobile unit whole show-on-mobiles">
<select onchange="if (this.value) window.location.href=this.value">
<option value="">Navigate the docs…</option>
<optgroup label="Getting Started">
<option value="/docs/home/">Welcome</option>
<option value="/docs/quickstart/">Quick-start guide</option>
<option value="/docs/installation/">Installation</option>
<option value="/docs/usage/">Basic Usage</option>
<option value="/docs/structure/">Directory structure</option>
<option value="/docs/configuration/">Configuration</option>
</optgroup>
<optgroup label="Your Content">
<option value="/docs/frontmatter/">Front Matter</option>
<option value="/docs/posts/">Writing posts</option>
<option value="/docs/drafts/">Working with drafts</option>
<option value="/docs/pages/">Creating pages</option>
<option value="/docs/static-files/">Static Files</option>
<option value="/docs/variables/">Variables</option>
<option value="/docs/collections/">Collections</option>
<option value="/docs/datafiles/">Data Files</option>
<option value="/docs/assets/">Assets</option>
<option value="/docs/migrations/">Blog migrations</option>
</optgroup>
<optgroup label="Customization">
<option value="/docs/templates/">Templates</option>
<option value="/docs/includes/">Includes</option>
<option value="/docs/permalinks/">Permalinks</option>
<option value="/docs/pagination/">Pagination</option>
<option value="/docs/plugins/">Plugins</option>
<option value="/docs/themes/">Themes</option>
<option value="/docs/extras/">Extras</option>
</optgroup>
<optgroup label="Deployment">
<option value="/docs/github-pages/">GitHub Pages</option>
<option value="/docs/deployment-methods/">Deployment methods</option>
<option value="/docs/continuous-integration/">Continuous Integration</option>
</optgroup>
<optgroup label="Miscellaneous">
<option value="/docs/troubleshooting/">Troubleshooting</option>
<option value="/docs/sites/">Sites using Jekyll</option>
<option value="/docs/resources/">Resources</option>
<option value="/docs/upgrading/0-to-2/">Upgrading from 0.x to 2.x</option>
<option value="/docs/upgrading/2-to-3/">Upgrading from 2.x to 3.x</option>
</optgroup>
<optgroup label="Meta">
<option value="/docs/contributing/">Contributing</option>
<option value="/docs/maintaining/">Maintaining Jekyll</option>
<option value="/docs/conduct/">Code of Conduct</option>
<option value="/docs/history/">History</option>
</optgroup>
</select>
</div>
<div class="unit four-fifths">
<article>
<div class="improve right hide-on-mobiles">
<a href="https://github.com/jekyll/jekyll/edit/master/docs/_docs/assets.md"><i class="fa fa-pencil"></i> Improve this page</a>
</div>
<h1>Assets</h1>
<p>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 <code class="highlighter-rouge">.sass</code>, <code class="highlighter-rouge">.scss</code>, or <code class="highlighter-rouge">.coffee</code>) and <strong><em>start the
file with two lines of triple dashes</em></strong>, like this:</p>
<div class="language-sass highlighter-rouge">
<pre class="highlight"><code><span class="nt">---</span>
<span class="nt">---</span>
<span class="c1">// start content
</span><span class="nc">.my-definition</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">1</span><span class="mi">.2em</span>
</code></pre>
</div>
<p>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 <code class="highlighter-rouge">css/styles.scss</code> in your site’s source folder, Jekyll
will process it and put it in your site’s destination folder under
<code class="highlighter-rouge">css/styles.css</code>.</p>
<div class="note info">
<h5>Jekyll processes all Liquid filters and tags in asset files</h5>
<p>If you are using <a href="https://mustache.github.io">Mustache</a>
or another JavaScript templating language that conflicts with
the <a href="/docs/templates/">Liquid template syntax</a>, you
will need to place <code>{% raw %}</code> and
<code>{% endraw %}</code> tags around your code.</p>
</div>
<h2 id="sassscss">Sass/SCSS</h2>
<p>Jekyll allows you to customize your Sass conversion in certain ways.</p>
<p>Place all your partials in your <code class="highlighter-rouge">sass_dir</code>, which defaults to
<code class="highlighter-rouge"><source>/_sass</code>. Place your main SCSS or Sass files in the place you want
them to be in the output file, such as <code class="highlighter-rouge"><source>/css</code>. For an example, take
a look at <a href="https://github.com/jekyll/jekyll-sass-converter/tree/master/example">this example site using Sass support in Jekyll</a>.</p>
<p>If you are using Sass <code class="highlighter-rouge">@import</code> statements, you’ll need to ensure that your
<code class="highlighter-rouge">sass_dir</code> is set to the base directory that contains your Sass files. You
can do that thusly:</p>
<div class="language-yaml highlighter-rouge">
<pre class="highlight"><code><span class="s">sass</span><span class="pi">:</span>
<span class="s">sass_dir</span><span class="pi">:</span> <span class="s">_sass</span>
</code></pre>
</div>
<p>The Sass converter will default the <code class="highlighter-rouge">sass_dir</code> configuration option to
<code class="highlighter-rouge">_sass</code>.</p>
<div class="note info">
<h5>The <code>sass_dir</code> is only used by Sass</h5>
<p>
Note that the <code>sass_dir</code> becomes 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.
</p>
</div>
<p>You may also specify the output style with the <code class="highlighter-rouge">style</code> option in your
<code class="highlighter-rouge">_config.yml</code> file:</p>
<div class="language-yaml highlighter-rouge">
<pre class="highlight"><code><span class="s">sass</span><span class="pi">:</span>
<span class="s">style</span><span class="pi">:</span> <span class="s">compressed</span>
</code></pre>
</div>
<p>These are passed to Sass, so any output style options Sass supports are valid
here, too.</p>
<h2 id="coffeescript">Coffeescript</h2>
<p>To enable Coffeescript in Jekyll 3.0 and up you must</p>
<ul>
<li>Install the <code class="highlighter-rouge">jekyll-coffeescript</code> gem</li>
<li>Ensure that your <code class="highlighter-rouge">_config.yml</code> is up-to-date and includes the following:</li>
</ul>
<div class="language-yaml highlighter-rouge">
<pre class="highlight"><code><span class="s">gems</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-coffeescript</span>
</code></pre>
</div>
<div class="section-nav">
<div class="left align-right">
<a href="/docs/datafiles/" class="prev">Back</a>
</div>
<div class="right align-left">
<a href="/docs/migrations/" class="next">Next</a>
</div>
</div>
<div class="clear"></div>
</article>
</div>
<div class="unit one-fifth hide-on-mobiles">
<aside>
<h4>Getting Started</h4>
<ul>
<li class=""><a href="/docs/home/">Welcome</a></li>
<li class=""><a href="/docs/quickstart/">Quick-start guide</a></li>
<li class=""><a href="/docs/installation/">Installation</a></li>
<li class=""><a href="/docs/usage/">Basic Usage</a></li>
<li class=""><a href="/docs/structure/">Directory structure</a></li>
<li class=""><a href="/docs/configuration/">Configuration</a></li>
</ul>
<h4>Your Content</h4>
<ul>
<li class=""><a href="/docs/frontmatter/">Front Matter</a></li>
<li class=""><a href="/docs/posts/">Writing posts</a></li>
<li class=""><a href="/docs/drafts/">Working with drafts</a></li>
<li class=""><a href="/docs/pages/">Creating pages</a></li>
<li class=""><a href="/docs/static-files/">Static Files</a></li>
<li class=""><a href="/docs/variables/">Variables</a></li>
<li class=""><a href="/docs/collections/">Collections</a></li>
<li class=""><a href="/docs/datafiles/">Data Files</a></li>
<li class="current"><a href="/docs/assets/">Assets</a></li>
<li class=""><a href="/docs/migrations/">Blog migrations</a></li>
</ul>
<h4>Customization</h4>
<ul>
<li class=""><a href="/docs/templates/">Templates</a></li>
<li class=""><a href="/docs/includes/">Includes</a></li>
<li class=""><a href="/docs/permalinks/">Permalinks</a></li>
<li class=""><a href="/docs/pagination/">Pagination</a></li>
<li class=""><a href="/docs/plugins/">Plugins</a></li>
<li class=""><a href="/docs/themes/">Themes</a></li>
<li class=""><a href="/docs/extras/">Extras</a></li>
</ul>
<h4>Deployment</h4>
<ul>
<li class=""><a href="/docs/github-pages/">GitHub Pages</a></li>
<li class=""><a href="/docs/deployment-methods/">Deployment methods</a></li>
<li class=""><a href="/docs/continuous-integration/">Continuous Integration</a></li>
</ul>
<h4>Miscellaneous</h4>
<ul>
<li class=""><a href="/docs/troubleshooting/">Troubleshooting</a></li>
<li class=""><a href="/docs/sites/">Sites using Jekyll</a></li>
<li class=""><a href="/docs/resources/">Resources</a></li>
<li class=""><a href="/docs/upgrading/0-to-2/">Upgrading from 0.x to 2.x</a></li>
<li class=""><a href="/docs/upgrading/2-to-3/">Upgrading from 2.x to 3.x</a></li>
</ul>
<h4>Meta</h4>
<ul>
<li class=""><a href="/docs/contributing/">Contributing</a></li>
<li class=""><a href="/docs/maintaining/">Maintaining Jekyll</a></li>
<li class=""><a href="/docs/conduct/">Code of Conduct</a></li>
<li class=""><a href="/docs/history/">History</a></li>
</ul>
</aside>
</div>
<div class="clear"></div>
</div>
</section>
<footer>
<div class="grid">
<div class="unit one-third center-on-mobiles">
<p>The contents of this website are <br>© 2017 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
</div>
<div class="unit two-thirds align-right center-on-mobiles">
<p>
Proudly hosted by
<a href="https://github.com">
<img src="/img/footer-logo.png" width="100" height="30" alt="GitHub • Social coding">
</a>
</p>
</div>
</div>
</footer>
<script>
var anchorForId = function (id) {
var anchor = document.createElement("a");
anchor.className = "header-link";
anchor.href = "#" + id;
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
anchor.title = "Permalink";
return anchor;
};
var linkifyAnchors = function (level, containingElement) {
var headers = containingElement.getElementsByTagName("h" + level);
for (var h = 0; h < headers.length; h++) {
var header = headers[h];
if (typeof header.id !== "undefined" && header.id !== "") {
header.appendChild(anchorForId(header.id));
}
}
};
document.onreadystatechange = function () {
if (this.readyState === "complete") {
var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0];
if (!contentBlock) {
return;
}
for (var level = 1; level <= 6; level++) {
linkifyAnchors(level, contentBlock);
}
}
};
</script>
<!-- Gauges (http://get.gaug.es/) -->
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '503c5af6613f5d0f19000027');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
<!-- Google Analytics (https://www.google.com/analytics) -->
<script>
!function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
(j[y].q=j[y].q||[]).push(arguments)}),j[y].l=+new Date,l=e.createElement(k),
L=e.getElementsByTagName(k)[0],l.src='//www.google-analytics.com/analytics.js',
L.parentNode.insertBefore(l,L)}(window,document,'script','ga');
ga('create', 'UA-50755011-1', 'jekyllrb.com');
ga('send', 'pageview');
</script>
</body>
</html>