mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 12:04:40 +01:00
Add 404, sass implementation pages, robots.txt, humans.txt.
This commit is contained in:
parent
2548efea42
commit
7b920ba560
4
LICENSE
4
LICENSE
@ -1,5 +1,5 @@
|
||||
Copyright (c) 2006-2023 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, and
|
||||
Jina Anne
|
||||
Copyright (c) 2006-2023 Hampton Lintorn-Catlin, Natalie Weizenbaum, Chris
|
||||
Eppstein, and Jina Anne
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
|
@ -23,6 +23,10 @@ module.exports = (eleventyConfig) => {
|
||||
eleventyConfig.addPassthroughCopy('source/assets/img');
|
||||
eleventyConfig.addPassthroughCopy('source/favicon.ico');
|
||||
eleventyConfig.addPassthroughCopy('source/_redirects');
|
||||
eleventyConfig.addPassthroughCopy('source/browserconfig.xml');
|
||||
eleventyConfig.addPassthroughCopy('source/tile.png');
|
||||
eleventyConfig.addPassthroughCopy('source/tile-wide.png');
|
||||
eleventyConfig.addPassthroughCopy('source/robots.txt');
|
||||
|
||||
eleventyConfig.setUseGitIgnore(false);
|
||||
eleventyConfig.watchIgnores.add('source/_data/versionCache.json');
|
||||
|
8
source/404.md
Normal file
8
source/404.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
title: Page Not Found
|
||||
permalink: 404.html
|
||||
introduction: >
|
||||
Sorry, but the page you were trying to view does not exist.
|
||||
center_introduction: true
|
||||
---
|
52
source/_data/humans.yml
Normal file
52
source/_data/humans.yml
Normal file
@ -0,0 +1,52 @@
|
||||
# Website Credits
|
||||
team:
|
||||
- name: Jina
|
||||
role: design lead, code, content
|
||||
twitter: jina
|
||||
- name: Natalie Weizenbaum
|
||||
role: code, content
|
||||
twitter: nex3
|
||||
|
||||
contributors:
|
||||
- name: Chris Eppstein
|
||||
role: code, content
|
||||
twitter: chriseppstein
|
||||
- name: Hampton Lintorn-Catlin
|
||||
role: code, content
|
||||
twitter: HamptonMakes
|
||||
- name: Michael Lintorn-Catlin
|
||||
role: content
|
||||
twitter: malrase
|
||||
- name: Bermon Painter
|
||||
role: design, code, content
|
||||
twitter: bermonpainter
|
||||
- name: Michael Parenteau
|
||||
role: design, code, content
|
||||
twitter: parenteau
|
||||
|
||||
thanks:
|
||||
- name: All the people at SassConf that came to help with DNS and server-related issues.
|
||||
- name: To everyone who has contributed through pull requests.
|
||||
|
||||
markup:
|
||||
- name: HTML5
|
||||
- name: LiquidJS
|
||||
- name: Markdown
|
||||
|
||||
style:
|
||||
- name: CSS3
|
||||
- name: Sass
|
||||
- name: Normalize
|
||||
- name: Sanitize
|
||||
|
||||
behavior:
|
||||
- name: Modernizr
|
||||
- name: jQuery
|
||||
|
||||
misc:
|
||||
- name: Eleventy
|
||||
- name: HTML5 Boilerplate
|
||||
- name: GitHub
|
||||
- name: Netlify
|
||||
- name: Visual Studio Code
|
||||
- name: iTerm
|
31
source/_layouts/has_both_sidebars.liquid
Normal file
31
source/_layouts/has_both_sidebars.liquid
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<div class="sl-l-medium-holy-grail">
|
||||
<div class="sl-l-medium-holy-grail__body">
|
||||
<nav class="sl-l-medium-holy-grail__navigation" role="navigation" aria-label="Content navigation">
|
||||
{{ navigation | markdown }}
|
||||
</nav>
|
||||
|
||||
<div class="sl-l-medium-holy-grail__main">
|
||||
<div class="sl-l-medium-holy-grail">
|
||||
<div class="sl-l-medium-holy-grail__body">
|
||||
{% if complementary_content %}
|
||||
<div class="sl-l-large-holy-grail__complementary{% if table_of_contents %} sl-l-large-holy-grail__complementary--contents{% endif %}">
|
||||
{{ complementary_content | markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sl-l-large-holy-grail__main docSearch-content">
|
||||
<div class="{% unless no_container %}sl-l-container sl-l-container--small{% endunless %}">
|
||||
{% render 'intro', before_introduction: before_introduction, introduction: introduction, center_introduction: center_introduction %}
|
||||
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -4,7 +4,7 @@ layout: base
|
||||
|
||||
<div class="sl-l-medium-holy-grail">
|
||||
<div class="sl-l-medium-holy-grail__body">
|
||||
<nav class="sl-l-medium-holy-grail__navigation" role="navigation">
|
||||
<nav class="sl-l-medium-holy-grail__navigation" role="navigation" aria-label="Content navigation">
|
||||
{{ navigation | markdown }}
|
||||
</nav>
|
||||
<div class="sl-l-medium-holy-grail__main">
|
||||
|
@ -51,16 +51,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoints.sl-breakpoint--medium {
|
||||
.sl-l-container--overview {
|
||||
font-size: var(--sl-font-size--large);
|
||||
|
||||
.sl-c-callout {
|
||||
font-size: var(--sl-font-size--small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoints.sl-breakpoint--large {
|
||||
.sl-c-callout--function {
|
||||
padding-left: 2.25rem;
|
||||
|
@ -7,7 +7,7 @@ date: 2013-11-22 16:57:00 -8
|
||||
_This was originally published as [a gist](https://gist.github.com/nex3/7609394)_.
|
||||
|
||||
[Aaron Leung](https://github.com/akhleung) is working on
|
||||
[hcatlin/libsass](http://github.com/hcatlin/libsass) and was wondering how
|
||||
[libsass](https://github.com/sass/libsass) and was wondering how
|
||||
`@extend` is implemented in the Ruby implementation of Sass. Rather than just
|
||||
tell him, I thought I'd write up a public document about it so anyone who's
|
||||
porting Sass or is just curious about how it works can see.
|
||||
|
@ -28,7 +28,7 @@ high-level and easy to hack on, so it's where we iterate on new features and
|
||||
where they first get released. Then there's
|
||||
[LibSass](https://github.com/sass/libsass), the C++ implementation, originally
|
||||
created by [Aaron](https://github.com/akhleung) and
|
||||
[Hampton](https://github.com/hcatlin) and now maintained by
|
||||
[Hampton](https://github.com/hamptonmakes) and now maintained by
|
||||
[Marcel](https://github.com/mgreter) and [Michael](https://github.com/xzyfer).
|
||||
It's low-level, which makes it very fast and easy to install and embed in other
|
||||
languages. In particular, its [Node.js
|
||||
|
@ -20,7 +20,7 @@ The 1.0.0 stable release indicates that Dart Sass is fully compatible with the
|
||||
Sass language as defined by [the sass-spec test
|
||||
suite](http://github.com/sass/sass-spec), and that its npm package is compatible
|
||||
with the [Node Sass
|
||||
API](https://github.com/sass/node-sass/blob/master/README.md#usage), with the
|
||||
API](https://github.com/sass/node-sass#usage), with the
|
||||
exception of source map support which is [coming
|
||||
soon](https://github.com/sass/dart-sass/issues/2).
|
||||
|
||||
|
12
source/browserconfig.xml
Normal file
12
source/browserconfig.xml
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="tile.png"/>
|
||||
<square150x150logo src="tile.png"/>
|
||||
<wide310x150logo src="tile-wide.png"/>
|
||||
<square310x310logo src="tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
@ -14,7 +14,7 @@ complementary_content: |
|
||||
by Kitty Giraudel and Miriam Suzanne
|
||||
|
||||
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
|
||||
by Hampton Lintorn Catlin and Michael Lintorn Catlin
|
||||
by Hampton Lintorn-Catlin and Michael Lintorn-Catlin
|
||||
|
||||
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
|
||||
by Dan Cederholm
|
||||
|
143
source/dart-sass.md
Normal file
143
source/dart-sass.md
Normal file
@ -0,0 +1,143 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
title: Dart Sass
|
||||
no_container: true
|
||||
introduction: >
|
||||
Dart Sass is the primary implementation of Sass, which means it gets new
|
||||
features before any other implementation. It's fast, easy to install, and it
|
||||
compiles to pure JavaScript which makes it easy to integrate into modern web
|
||||
development workflows. Find out more or help out with its development on
|
||||
[GitHub](https://github.com/sass/dart-sass).
|
||||
---
|
||||
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large">
|
||||
<div class="sl-l-grid__column">
|
||||
|
||||
## Command Line
|
||||
|
||||
Dart Sass's stand-alone command-line executable uses the blazing-fast Dart VM to
|
||||
compile your stylesheets. To install Dart Sass on the command line, check out
|
||||
the [installation instructions](/install). Once you've got it running, you can
|
||||
use it compile files:
|
||||
|
||||
```shell
|
||||
sass source/index.scss css/index.css
|
||||
```
|
||||
|
||||
See `sass --help` for additional information on the command-line interface.
|
||||
|
||||
### Dart Library
|
||||
|
||||
You can also use Dart Sass as a Dart library to get the speed of the Dart VM
|
||||
plus the ability to define your own functions and importers. To add it to an
|
||||
existing project:
|
||||
|
||||
1. [Install the Dart SDK][install]. Make sure its `bin` directory is [on your
|
||||
`PATH`][path].
|
||||
|
||||
[install]: https://dart.dev/get-dart
|
||||
[path]: https://katiek2.github.io/path-doc/
|
||||
|
||||
2. Create a `pubspec.yaml` file like this:
|
||||
|
||||
```yaml
|
||||
name: my_project
|
||||
dev_dependencies:
|
||||
sass: ^{{ releases['dart-sass'].version }}
|
||||
```
|
||||
|
||||
3. Run `dart pub get`.
|
||||
|
||||
4. Create a `compile-sass.dart` file like this:
|
||||
|
||||
```dart
|
||||
import 'dart:io';
|
||||
import 'package:sass/sass.dart' as sass;
|
||||
|
||||
void main(List<String> arguments) {
|
||||
var result = sass.compile(arguments[0]);
|
||||
new File(arguments[1]).writeAsStringSync(result);
|
||||
}
|
||||
```
|
||||
|
||||
5. You can now use this to compile files:
|
||||
|
||||
```shell
|
||||
dart compile-sass.dart styles.scss styles.css
|
||||
```
|
||||
|
||||
6. Learn more about [writing Dart code][dart] (it's easy!) and about [Sass's
|
||||
Dart API][sass].
|
||||
|
||||
[dart]: https://www.dartlang.org/guides/language/language-tour
|
||||
[sass]: https://pub.dev/documentation/sass/latest/sass/compileToResult.html
|
||||
|
||||
</div>
|
||||
<div class="sl-l-grid__column">
|
||||
|
||||
## JavaScript Library
|
||||
|
||||
Dart Sass is also distributed as the pure JavaScript [`sass`
|
||||
package](https://www.npmjs.com/package/sass) on npm. The pure JS version is
|
||||
slower than the stand-alone executable, but it's easy to integrate into existing
|
||||
workflows and it allows you to define custom functions and importers in
|
||||
JavaScript. You can add it to your project using `npm install --save-dev sass`
|
||||
and `require()` it as a library:
|
||||
|
||||
```js
|
||||
var sass = require('sass');
|
||||
|
||||
sass.render(
|
||||
{
|
||||
file: scss_filename,
|
||||
},
|
||||
function (err, result) {
|
||||
/* ... */
|
||||
},
|
||||
);
|
||||
|
||||
// OR
|
||||
|
||||
var result = sass.renderSync({
|
||||
file: scss_filename,
|
||||
});
|
||||
```
|
||||
|
||||
When installed via npm, Dart Sass supports a JavaScript API that aims to be
|
||||
compatible with [Node Sass](https://github.com/sass/node-sass#usage). Full
|
||||
compatibility is a work in progress, but Dart Sass currently supports the
|
||||
`render()` and `renderSync()` functions. Note however that by default,
|
||||
**`renderSync()` is more than twice as fast as `render()`**, due to the overhead
|
||||
of asynchronous callbacks.
|
||||
|
||||
To avoid this performance hit, `render()` can use the [`fibers`][fibers] package
|
||||
to call asynchronous importers from the synchronous code path. To enable this,
|
||||
pass the `Fiber` class to the `fiber` option:
|
||||
|
||||
[fibers]: https://www.npmjs.com/package/fibers
|
||||
|
||||
```js
|
||||
var sass = require('sass');
|
||||
var Fiber = require('fibers');
|
||||
|
||||
sass.render(
|
||||
{
|
||||
file: 'input.scss',
|
||||
importer: function (url, prev, done) {
|
||||
// ...
|
||||
},
|
||||
fiber: Fiber,
|
||||
},
|
||||
function (err, result) {
|
||||
// ...
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
See [Dart Sass's documentation][js api] for more information about its
|
||||
JavaScript API.
|
||||
|
||||
[js api]: https://github.com/sass/dart-sass#legacy-javascript-api
|
||||
|
||||
</div>
|
||||
</div>
|
25
source/humans.liquid
Normal file
25
source/humans.liquid
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
permalink: humans.txt
|
||||
---
|
||||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
{% for person in humans.team %}
|
||||
{{ person.name }} -- {{ person.role }} -- @{{ person.twitter }}
|
||||
{%- endfor %}
|
||||
|
||||
# THANKS
|
||||
{% for person in humans.contributors %}
|
||||
{{ person.name }} -- {{ person.role }} -- @{{ person.twitter }}
|
||||
{%- endfor %}
|
||||
{%- for person in humans.thanks %}
|
||||
{{ person.name }}
|
||||
{%- endfor %}
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
{% for tech in humans.markup %}{{ tech.name }}{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
{% for tech in humans.style %}{{ tech.name }}{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
{% for tech in humans.behavior %}{{ tech.name }}{% unless forloop.last %}, {% endunless %}{% endfor %}
|
||||
{% for tech in humans.misc %}{{ tech.name }}{% unless forloop.last %}, {% endunless %}{% endfor %}
|
@ -9,30 +9,29 @@ introduction: >
|
||||
|
||||
<ul class="list-tiled">
|
||||
<li>
|
||||
{% markdown %}
|
||||
|
||||
## Resources
|
||||
|
||||
* [`sass-spec`](https://github.com/sass/sass-spec) is a suite of
|
||||
- [`sass-spec`](https://github.com/sass/sass-spec) is a suite of
|
||||
implementation-agnostic test cases for verifying that a Sass
|
||||
implementation behaves correctly. It's the best way to track your
|
||||
implementation's compatibility with the Sass reference implementation.
|
||||
|
||||
* [How `@extend` Works](https://gist.github.com/nex3/7609394) is a
|
||||
- [How `@extend` Works](https://gist.github.com/nex3/7609394) is a
|
||||
fairly comprehensive run-down of the algorithm used by Sass's
|
||||
trickiest feature. Natalie still says that the implementation of
|
||||
`@extend` is the hardest code she's ever had to write, but luckily you
|
||||
don't have to figure it out from scratch.
|
||||
|
||||
* **Reach out!** If you're working on a new implementation, we want to
|
||||
- **Reach out!** If you're working on a new implementation, we want to
|
||||
hear about it. Send an email to [Natalie](mailto:nex342@gmail.com) and
|
||||
[Chris](mailto:chris@eppsteins.net), tell us about the cool work
|
||||
you're doing, and ask about any corners of the language that don't
|
||||
quite make sense.
|
||||
{% endmarkdown %}
|
||||
</li>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
{% markdown %}
|
||||
|
||||
## Requirements
|
||||
|
||||
We whole-heartedly love new implementations of Sass, but we do have a
|
||||
@ -54,11 +53,10 @@ all is because the language enables styles and frameworks to be shared
|
||||
among designers, and it's crucial for sharing that Sass code that works
|
||||
for one implementation works the same for all of them. In addition, it's
|
||||
important that there be a unified vision for the language design.
|
||||
{% endmarkdown %}
|
||||
</li>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
{% markdown %}
|
||||
|
||||
## Making Language Changes
|
||||
|
||||
Sass can still evolve as a language, of course. We have [a process][] for
|
||||
@ -70,6 +68,6 @@ this may be impossible in some circumstances, and the ultimate say lies
|
||||
with the lead designer of Sass, Natalie.
|
||||
|
||||
[a process]: https://github.com/sass/sass/blob/main/CONTRIBUTING.md
|
||||
{% endmarkdown %}
|
||||
|
||||
</li>
|
||||
</ul>
|
177
source/libsass.md
Normal file
177
source/libsass.md
Normal file
@ -0,0 +1,177 @@
|
||||
---
|
||||
layout: has_both_sidebars
|
||||
title: LibSass
|
||||
introduction: >
|
||||
LibSass is an implementation of Sass in C/C++, designed to be easy to
|
||||
integrate into many different languages. However, as time wore on it ended up
|
||||
lagging behind [Dart Sass](/dart-sass) in features and CSS compatibility.
|
||||
**LibSass is now deprecated**—new projects should use Dart Sass instead.
|
||||
navigation: |
|
||||
## Wrappers
|
||||
|
||||
<nav class="sl-c-list-navigation-wrapper">
|
||||
|
||||
- [SassC](#sassc)
|
||||
- [Crystal](#crystal)
|
||||
- [Go](#go)
|
||||
- [Java](#java)
|
||||
- [JavaScript](#javascript)
|
||||
- [Lua](#lua)
|
||||
- [.NET](#net)
|
||||
- [Node](#node)
|
||||
- [Perl](#perl)
|
||||
- [PHP](#php)
|
||||
- [Python](#python)
|
||||
- [Ruby](#ruby)
|
||||
- [R](#r)
|
||||
- [Rust](#rust)
|
||||
- [Scala](#scala)
|
||||
|
||||
</nav>
|
||||
complementary_content: |
|
||||
## Resources
|
||||
|
||||
- [Lightning fast Sass compiling with libsass, Node-sass and
|
||||
Grunt-sass](https://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/)
|
||||
--- by Ben Frain, August 2013
|
||||
- [Node, Express and
|
||||
libSass](https://anotheruiguy.gitbooks.io/nodeexpreslibsass_from-scratch/content/index.html)
|
||||
--- Node, Express and libSass: a project from scratch workshop
|
||||
---
|
||||
|
||||
## Wrappers
|
||||
|
||||
LibSass is just a library. To run the code locally (i.e. to compile your
|
||||
stylesheets), you need an implementer, or "wrapper". There are a number of other
|
||||
wrappers for LibSass. We encourage you to write your own wrapper --- the whole
|
||||
point of LibSass is that we want to bring Sass to many other languages, not just
|
||||
Ruby!
|
||||
|
||||
Below are the LibSass wrappers that we're currently aware of. Sometimes there
|
||||
are multiple wrappers per language -- in those cases, we put the most
|
||||
recently-updated wrapper first.
|
||||
|
||||
- ### Sass C {#sassc}
|
||||
|
||||
[SassC](https://github.com/sass/sassc) (get it?) is a wrapper written in C.
|
||||
|
||||
To run the compiler on your local machine, you need to build SassC. To build
|
||||
SassC, you must have either a local copy of the LibSass source or it must be
|
||||
installed into your system. For development, please use the source version.
|
||||
You must then setup an environment variable pointing to the LibSass folder,
|
||||
for example:
|
||||
|
||||
```shell
|
||||
export SASS_LIBSASS_PATH=/Users/hampton/path/libsass
|
||||
```
|
||||
|
||||
The executable will be in the bin folder. To run it, try something like:
|
||||
|
||||
```shell
|
||||
./bin/sassc [input file] > output.css
|
||||
```
|
||||
|
||||
- ### Crystal {#crystal}
|
||||
|
||||
[sass.cr](https://github.com/straight-shoota/sass.cr) is a LibSass wrapper for
|
||||
the [Crystal programming language](https://crystal-lang.org/).
|
||||
|
||||
- ### Go {#go}
|
||||
|
||||
[go-libsass](https://github.com/wellington/go-libsass) has the most active
|
||||
GoLang wrapper. [gosass](https://github.com/moovweb/gosass) is another LibSass
|
||||
wrapper.
|
||||
|
||||
[C6](https://github.com/c9s/c6) is a Sass 3.2 compatible implementation
|
||||
written in pure GoLang that aims to extend Sass.
|
||||
[wellington/sass](https://github.com/wellington/sass) is an in-progress pure
|
||||
Go Sass lexer, parser, and compiler.
|
||||
|
||||
- ### Java {#java}
|
||||
|
||||
There is one Java wrapper --- [jsass](https://github.com/bit3/jsass). There is
|
||||
also a plugin for Maven --- [LibSass Maven
|
||||
plugin](https://gitlab.com/haynes/libsass-maven-plugin).
|
||||
|
||||
- ### JavaScript {#javascript}
|
||||
|
||||
The [sass.js](https://github.com/medialize/sass.js) project makes LibSass
|
||||
available as pure JavaScript. There's a way to [test it in the
|
||||
browser](https://sass.js.org/), too.
|
||||
|
||||
- ### Lua {#lua}
|
||||
|
||||
The Lua wrapper is found at
|
||||
[lua-sass](https://github.com/craigbarnes/lua-sass).
|
||||
|
||||
- ### .NET {#net}
|
||||
|
||||
[LibSass Host](https://github.com/Taritsyn/LibSassHost) is updated regularly,
|
||||
and is probably the best bet. There's also
|
||||
[libsass-net](https://github.com/sass/libsass-net) or
|
||||
[NSass](https://github.com/TBAPI-0KA/NSass), although they haven't been
|
||||
updated in a while.
|
||||
|
||||
- ### Node {#node}
|
||||
|
||||
The [node-sass](https://github.com/sass/node-sass) project has proven to be
|
||||
popular, and we've taken it into the main Sass GitHub repo. Check out its
|
||||
package page [here](https://www.npmjs.com/package/node-sass), and [there's a
|
||||
dedicated twitter account](https://twitter.com/nodesass) for updates.
|
||||
|
||||
- ### Perl {#perl}
|
||||
|
||||
The [CSS::Sass](https://github.com/sass/perl-libsass) project is updated
|
||||
regularly. There's the [Text-Sass-XS](https://github.com/ysasaki/Text-Sass-XS)
|
||||
project, too, although it hasn't been updated in a while.
|
||||
|
||||
- ### PHP {#php}
|
||||
|
||||
The [SassPHP](https://github.com/absalomedia/sassphp) project is an updated
|
||||
fork of an [older PHP version](https://github.com/jamierumbelow/sassphp).
|
||||
|
||||
- ### Python {#python}
|
||||
|
||||
The [libsass-python](https://github.com/sass/libsass-python) project is
|
||||
updated regularly. There are more details on [its own
|
||||
website](https://sass.github.io/libsass-python/).
|
||||
|
||||
Three other Python projects,
|
||||
[python-scss](https://github.com/pistolero/python-scss),
|
||||
[pylibsass](https://github.com/rsenk330/pylibsass) and
|
||||
[SassPython](https://github.com/marianoguerra/SassPython), haven't been
|
||||
updated in a while.
|
||||
|
||||
- ### Ruby {#ruby}
|
||||
|
||||
LibSass has also been ported back into Ruby for the
|
||||
[sassc-ruby](https://github.com/sass/sassc-ruby) project.
|
||||
|
||||
- ### R {#r}
|
||||
|
||||
The [R](https://www.r-project.org/) [Sass
|
||||
package](https://github.com/rstudio/sass) wraps LibSass with additional
|
||||
caching and bundling methods. [Extended
|
||||
documentation](https://rstudio.github.io/sass/).
|
||||
|
||||
- ### Rust {#rust}
|
||||
|
||||
The [`sass_rs`](https://github.com/compass-rs/sass-rs) crate is a LibSass
|
||||
wrapper and is updated regularly.
|
||||
|
||||
- ### Scala {#scala}
|
||||
|
||||
The only Scala project, [Sass-Scala](https://github.com/kkung/Sass-Scala),
|
||||
hasn't been updated in a couple of years.
|
||||
|
||||
{.slides}
|
||||
|
||||
## About LibSass
|
||||
|
||||
This project is the brainchild of [Hampton
|
||||
Lintorn-Catlin](https://twitter.com/HamptonMakes), the original creator of Sass.
|
||||
[Aaron Leung](https://github.com/akhleung) is the primary developer.
|
||||
|
||||
<figure>
|
||||
<img alt="LibSass logo" width="640" height="320" src="/assets/img/logos/libsass.png">
|
||||
</figure>
|
5
source/robots.txt
Normal file
5
source/robots.txt
Normal file
@ -0,0 +1,5 @@
|
||||
# www.robotstxt.org/
|
||||
|
||||
# Allow crawling of all content
|
||||
User-agent: *
|
||||
Disallow:
|
56
source/ruby-sass.md
Normal file
56
source/ruby-sass.md
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
title: Ruby Sass
|
||||
introduction: >
|
||||
Ruby Sass was the original implementation of Sass, but it reached its end of
|
||||
life as of 26 March 2019. It's no longer supported, and Ruby Sass users should
|
||||
migrate to another implementation.
|
||||
---
|
||||
|
||||
- ## But Why?
|
||||
|
||||
When Natalie and Hampton first created Sass in 2006, Ruby was the language at
|
||||
the cutting edge of web development, the basis of their already-successful
|
||||
[Haml][] templating language, and the language they used most in their
|
||||
day-to-day work. Writing Sass in Ruby made it readily available to their
|
||||
existing users and the whole booming Ruby ecosystem.
|
||||
|
||||
[Haml]: https://haml.info/
|
||||
|
||||
Since then, Node.js has become ubiquitous for frontend tooling while Ruby has
|
||||
faded into the background. At the same time, Sass projects have grown far
|
||||
larger than we initially envisioned them, and their performance needs have
|
||||
outpaced the speed Ruby can provide. Both [Dart Sass][] and [LibSass][] are
|
||||
blazing fast, easy to install, and are readily available on npm. Ruby Sass
|
||||
couldn't keep up, and it didn't make sense to spend the core team's resources
|
||||
on it any longer.
|
||||
|
||||
[Dart Sass]: /dart-sass
|
||||
[LibSass]: /libsass
|
||||
|
||||
- ## Migrating Away
|
||||
|
||||
If you run Ruby Sass using the command-line `sass` executable, all you need to
|
||||
do is install Dart Sass's [command-line executable][install] instead. The
|
||||
interface isn't identical, but most options work the same way.
|
||||
|
||||
[install]: /install
|
||||
|
||||
If you use the `sass` gem as a library, the [`sassc`][] gem is the most
|
||||
seamless way to move away from Ruby Sass. It uses [LibSass][] to provide the
|
||||
same API for compiling Sass and defining custom functions as Ruby Sass, except
|
||||
that it uses the `SassC` module instead of `Sass`. However, it [doesn't
|
||||
yet][sassc#72] support the same `Importer` API. You can also use the
|
||||
[`sassc-rails`][] gem to plug smoothly into Ruby on Rails.
|
||||
|
||||
[`sassc`]: https://rubygems.org/gems/sassc
|
||||
[LibSass]: /libsass
|
||||
[sassc#72]: https://github.com/sass/sassc-ruby/issues/72
|
||||
[`sassc-rails`]: https://rubygems.org/gems/sassc-rails
|
||||
|
||||
Alternately, if you're using a JS build system, you can integrate that with
|
||||
[Dart Sass][] as a JavaScript library.
|
||||
|
||||
[Dart Sass]: /dart-sass
|
||||
|
||||
{.list-columns}
|
BIN
source/tile-wide.png
Normal file
BIN
source/tile-wide.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 6.6 KiB |
BIN
source/tile.png
Normal file
BIN
source/tile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Loading…
Reference in New Issue
Block a user