Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line…



Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules,
variables, mixins, selector inheritance, and more. It's translated to
well-formatted, standard CSS using the command line tool or a plugin for your
build system.
scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { @include border-radius(10px); }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Install Sass
You can install Sass on Windows, Mac, or Linux by downloading the package for
your operating system [from GitHub] and [adding it to your PATH][PATH]. That's
all—there are no external dependencies and nothing else you need to install.
[from GitHub]: https://github.com/sass/dart-sass/releases
[PATH]: https://katiek2.github.io/path-doc/
If you use Node.js, you can also install Sass using [npm] by running
[npm]: https://www.npmjs.com/
npm install -g sass
However, please note that this will install the pure JavaScript
implementation of Sass, which runs somewhat slower than the other options listed
here. But it has the same interface, so it'll be easy to swap in another
implementation later if you need a bit more speed!
See the Sass website for more ways to install
Sass.
Once you have Sass installed, you can run the sass executable to compile.sass and .scss files to .css files. For example:
sass source/stylesheets/index.scss build/stylesheets/index.css
Learn Sass
Check out the Sass website for a guide on how to
learn Sass!
This Repository
This repository isn't an implementation of Sass. Those live in
[sass/dart-sass] and [sass/libsass]. Instead, it contains:
[sass/dart-sass]: https://github.com/sass/dart-sass
[sass/libsass]: https://github.com/sass/libsass
- [
spec/], which contains specifications for language features. - [
proposal/], which contains in-progress proposals for changes to the
- [
accepted/], which contains proposals that have been accepted and are either
[spec/]: https://github.com/sass/sass/tree/main/spec
[proposal/]: https://github.com/sass/sass/tree/main/proposal
[accepted/]: https://github.com/sass/sass/tree/main/accepted
Note that this doesn't contain a full specification of Sass. Instead, feature
specifications are written as needed when a new feature is being designed or
when an implementor needs additional clarity about how something is supposed to
work. This means many of the specs in spec/ only cover small portions of the
features in question.
Versioning Policy
The proposals in this repository are versioned, to make it easy to track changes
over time and to refer to older versions. Every version has a Git tag of the
form proposal..draft-. A new version should be created for each
batch of changes.
Every version has a major version, and they may have a minor version as well
(indicated .). The minor version should be incremented for
changes that don't affect the intended semantics of the proposal; otherwise, the
major version should be incremented.
-
sass
Sass makes CSS fun!
TypeScript ★ 15k 4d agoExplain → -
node-sass ▣
:rainbow: Node.js bindings to libsass
C++ ★ 8.5k 1y agoExplain → -
libsass ▣
A C/C++ implementation of a Sass compiler
C++ ★ 4.3k 7mo agoExplain → -
dart-sass
The reference implementation of Sass, written in Dart.
Dart ★ 4.2k 4d agoExplain → -
sassc ▣
libsass command line driver
C ★ 784 7mo agoExplain → -
sassc-rails ▣
Integrate SassC-Ruby with Rails!
HTML ★ 704 7mo agoExplain → -
libsass-python ▣
A straightforward binding of libsass for Python. Compile Sass/SCSS in Python with no Ruby stack at all!
Python ★ 570 7mo agoExplain → -
sassc-ruby ▣
Use libsass with Ruby!
Ruby ★ 364 1y agoExplain → -
sass-site
Sass Website
TypeScript ★ 355 21h agoExplain → -
node-sass-middleware ▣
connect middleware extracted from node-sass
JavaScript ★ 262 7mo agoExplain → -
embedded-host-node
A Node.js library that will communicate with Embedded Dart Sass using the Embedded Sass protocol
TypeScript ★ 225 5d agoExplain → -
sass-spec
Official Sass Spec Suite
SCSS ★ 212 4d agoExplain → -
ruby-sass ▣
The original, now deprecated Ruby implementation of Sass
Ruby ★ 185 7y agoExplain → -
node-sass-binaries ▣
Platform specific binaries for node-sass
★ 126 8y agoExplain → -
migrator
Tool for migrating stylesheets to new Sass versions
Dart ★ 104 12d agoExplain → -
libsass-net ▣
A lightweight wrapper around libsass
C# ★ 95 7mo agoExplain → -
ruby-libsass ▣
Ruby bindings for libsass
Ruby ★ 82 11y agoExplain → -
dart-sass-embedded ▣
A wrapper for Dart Sass that implements the compiler side of the Embedded Sass protocol
Dart ★ 65 3y agoExplain → -
linter ▣
An experimental Sass linter written using the Dart Sass AST
Dart ★ 40 7y agoExplain → -
homebrew-sass
A Homebrew tap for Sass
Ruby ★ 39 9d agoExplain → -
perl-libsass ▣
Perl bindings for libsass (CSS::Sass)
Perl ★ 31 7mo agoExplain → -
embedded-protocol ▣
A protocol for communicating between a Sass implementation and a host language
★ 30 3y agoExplain → -
sass-site-built
The built HTML of the Sass website, used to see output diffs in code reviews
HTML ★ 11 21h agoExplain → -
sass-registry ▣
Extension registry for Sass
Ruby ★ 8 12y agoExplain → -
libsass.com ▣
No description.
CSS ★ 7 12y agoExplain → -
listen ⑂ ▣
The Listen gem listens to file modifications and notifies you about the changes.
Ruby ★ 7 8y agoExplain → -
clone-linked-repo
A utility action that emits information about one PR linked from another's message
Shell ★ 5 6mo agoExplain → -
dart-sass-language-server
Proof of concept language server for Sass written in Dart
Dart ★ 5 1y agoExplain → -
sync-child-process
An interactive, synchronous API for subprocesses in Node.js
TypeScript ★ 2 5d agoExplain → -
sync-message-port
A JS communication port that can pass messages synchronously across workers
TypeScript ★ 2 5d agoExplain →
No repos match these filters.