2023-01-06 21:35:17 +01:00
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Syntactically Awesome Style Sheets" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2023-01-24 23:51:07 +01:00
<title>Sass: {{ title | default: 'Syntactically Awesome Style Sheets' }}</title>
2023-01-06 21:35:17 +01:00
<link
rel="alternate"
type="application/atom+xml"
href="/feed.xml" />
2023-04-11 22:50:11 +02:00
<link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/icon.png">
<link rel="icon" type="image/png" sizes="152x152" href="/icon.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
2023-01-06 21:35:17 +01:00
<link
href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
media="screen"
rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
media="screen"
rel="stylesheet" />
<link
2023-01-06 22:40:29 +01:00
href="/assets/dist/css/sass.css"
2023-01-06 21:35:17 +01:00
media="screen"
rel="stylesheet" />
<noscript>
<link
2023-01-06 22:40:29 +01:00
href="/assets/dist/css/noscript.css"
2023-01-06 21:35:17 +01:00
media="screen"
rel="stylesheet" />
</noscript>
2023-01-06 22:40:29 +01:00
2023-01-24 23:51:07 +01:00
<!-- Google Analytics (https://developers.google.com/analytics/devguides/collection/gtagjs). -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-535380-14"></script>
2023-01-06 22:40:29 +01:00
<script>
2023-01-24 23:51:07 +01:00
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
2023-01-06 22:40:29 +01:00
2023-01-24 23:51:07 +01:00
gtag('config', 'UA-535380-14');
2023-01-06 22:40:29 +01:00
</script>
2023-01-06 21:35:17 +01:00
</head>
2023-02-17 17:22:42 +01:00
{%- assign classes = page.filePathStem | replace: "/", " " | strip -%}
2023-02-16 20:19:42 +01:00
<body data-layout="body" class="{{ classes }}">
2023-01-24 23:51:07 +01:00
<!--[if lt IE 9]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.
</p>
<![endif]-->
2023-05-31 18:10:09 +02:00
{% typogr -%}
{%- if is_playground -%}
2023-05-31 18:15:58 +02:00
{% render 'playground/playground_header', title: title %}
2023-05-31 18:10:09 +02:00
{%- else -%}
{% render 'header', alerts: alerts %}
{%- endif -%}
{%- endtypogr %}
2023-01-24 23:51:07 +01:00
<main class="content" id="main-content" itemprop="mainContentOfPage" role="main">
2023-05-31 18:10:09 +02:00
{% assign is_typedoc = page | isTypedoc %}
{% unless is_typedoc or is_playground %}
2023-01-24 23:51:07 +01:00
<h1 class="sl-l-container">
{%- if h1 -%}
{{ h1 | typogr }}
{%- elsif title -%}
{{ title | typogr }}
{%- endif -%}
</h1>
{% endunless %}
2023-05-31 16:04:29 +02:00
<div class="sl-l-container sl-color--white-background{% unless is_home %} sl-l-section{% endunless %}{% if is_playground %} sl-l-section-playground{% endif %}">
2023-01-31 23:05:27 +01:00
{{ content | typogr }}
2023-01-24 23:51:07 +01:00
</div>
<div class="sl-c-alert">
<div class="sl-l-container sl-c-list-horizontal-wrapper" aria-labelledby="release-nav">
<ul class="sl-l-grid--justify-center">
<li id="release-nav">Current Releases:</li>
2023-02-02 16:44:29 +01:00
<li><span class="release-name"><a href="/dart-sass">Dart Sass</a> <a href="{{ releases['dart-sass'].url }}">{{ releases['dart-sass'].version }}</a></span></li>
<li><span class="release-name"><a href="/libsass">LibSass</a> <a href="{{ releases['libsass'].url }}">{{ releases['libsass'].version }}</a></span></li>
2023-01-24 23:51:07 +01:00
<li><span class="release-name"><a href="/ruby-sass">Ruby Sass</a> <span aria-label="coffin" role="presentation">⚰</span></span></li>
<li class="sl-l-grid__column sl-l-large-grid__column--auto-size"><a href="/implementation">Implementation Guide</a></li>
</ul>
</div>
</div>
{% if section_bottom %}
2023-03-03 23:32:41 +01:00
<section class="sl-color--white-background sl-l-container">
2023-01-24 23:51:07 +01:00
<ul class="sl-l-grid sl-l-grid--full sl-l-medium-grid--gutters-large sl-l-medium-grid--divide-by-2 sl-l-large-grid--divide-by-3 sl-l-section">
{% for item in section_bottom %}
<li class="sl-l-grid__column">
<h2>{{ item.header | typogr }}</h2>
2023-02-01 23:42:31 +01:00
{{ item.body | markdown | typogr }}
2023-01-24 23:51:07 +01:00
</li>
{% endfor %}
</ul>
</section>
{% endif %}
</main>
2023-01-06 21:35:17 +01:00
2023-02-02 17:33:02 +01:00
{% typogr %}{% render 'footer' %}{% endtypogr %}
2023-01-06 21:35:17 +01:00
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<script>
docsearch({
container: '#docsearch',
appId: 'Q9MULQONSV',
indexName: 'sass-lang',
apiKey: '2ebc7881b79986f58dc2f424769bf3fc',
transformItems: function(hits) {
var domain = window.location.origin + "/";
hits.forEach(function(hit) {
if (! hit.url.startsWith(domain)) {
hit.url = hit.url.replace(/^https?:\/\/[^\/]+\//, domain);
}
});
return hits;
}
});
</script>
2023-01-31 23:05:27 +01:00
<script>
!function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location)
? 'http'
: 'https';
if (! d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
2023-01-06 23:35:10 +01:00
<script src="/assets/dist/js/sass.js"></script>
2023-01-06 21:35:17 +01:00
<!-- Current page: {{ page.url }} -->
</body>
</html>
