Guide · Open source
How to use Sass: install, compile and read the language specs
Updated · written with AI from the project's own documentation and checked against our catalogue data
Sass is an extension of CSS that adds features such as variables, nested rules and mixins, and it is translated into standard CSS. This guide explains what Sass is, how to install the tool, how to compile a file, and what the sass/sass repository contains, so you can pick the right resource for your goal. By the end you will be able to install Sass and compile a stylesheet, and you will know when the sass/sass repo is the right place to look.
Quick start
- 1Decide what you need. If you want to write Sass, install an implementation such as dart-sass or the npm package. If you want to read or propose language changes, use this repo.
- 2Install Sass. Download the package for your OS from GitHub and add it to your PATH, or run npm install -g sass if you use Node.js.
- 3Write a .scss file. Create a stylesheet using variables, nested rules or mixins.
- 4Compile to CSS. Run the sass executable with an input .scss file and an output .css file path.
- 5Clone this repo for specs. Run git clone https://github.com/sass/sass to read the feature specs and proposals.
- 6Read the versioning policy. Check the Git tags and major and minor version rules before you cite a proposal.
What Sass adds to CSS
Sass extends CSS with nested rules, variables, mixins, selector inheritance and more. You write Sass in .scss or .sass files, and it is translated into well-formatted, standard CSS using the command line tool or a plugin for your build system.
- Variables, such as $primary-color, store a value you can reuse.
- Nested rules let you write a nav ul or nav a block inside a parent selector.
- Mixins, defined with @mixin and applied with @include, let you reuse groups of declarations.
$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 on Windows, Mac or Linux
You can install Sass by downloading the package for your operating system from GitHub and adding it to your PATH. The source says there are no external dependencies and nothing else to install.
If you use Node.js, you can install Sass with npm. Note that this installs the pure JavaScript implementation, which runs somewhat slower than the other options. It has the same interface, so you can swap in another implementation later if you need more speed. The Sass website lists more ways to install Sass.
- Download the package from the dart-sass releases page on GitHub and add it to your PATH.
- Or run the npm command below if you use Node.js.
npm install -g sassCompile a Sass file to CSS
Once Sass is installed, run the sass executable with an input file and an output file. It compiles .sass and .scss files to .css files. The source gives this example, which reads a file in source/stylesheets and writes the result to build/stylesheets.
sass source/stylesheets/index.scss build/stylesheets/index.cssLearn the Sass language
For a guide to learning Sass, the README points to the Sass website at sass-lang.com/guide. The sass/sass repository itself is not a learning guide.
What the sass/sass repository contains
This repository is not an implementation of Sass. The compilers live in separate projects, sass/dart-sass and sass/libsass. Instead, the repo holds the written material on how the language is designed and changed.
The repo has three main folders. spec/ contains specifications for language features. proposal/ contains in-progress proposals for changes to the language. accepted/ contains proposals that have been accepted and are either implemented or being implemented.
The repo does not contain a full specification of Sass. Feature specs are written as needed, so many files in spec/ cover only small parts of a feature.
- spec/: specifications for language features
- proposal/: in-progress proposals
- accepted/: accepted proposals
Understand the versioning policy
Proposals in this repository are versioned so you can track changes and refer to older versions. Each version has a Git tag of the form proposal.<name>.draft-<version>. A new version should be created for each batch of changes.
Versions have a major number and may have a minor number. The minor number increases for changes that do not affect the intended semantics of the proposal. Otherwise the major number increases.
Clone the repository
To work with the specs and proposals locally, clone the repository from GitHub. The source lists no prerequisites for this repo.
git clone https://github.com/sass/sassWhat people use it for
- Compiling a .scss stylesheet into standard .css for a website through the command line.
- Using Sass through a plugin in your build system, as the README mentions.
- Reading the spec/ folder to see how a specific feature is defined.
- Following accepted/ proposals to see which language changes were approved.
- Drafting a change in proposal/ if you are a contributor.
Frequently asked questions
Is sass/sass the Sass compiler?
No. The README says this repository is not an implementation of Sass. The implementations live in sass/dart-sass and sass/libsass.
How do I install Sass?
Download the package for your operating system from GitHub and add it to your PATH, or run npm install -g sass if you use Node.js. The npm version is the pure JavaScript implementation, which runs somewhat slower than the others.
Does Sass need any dependencies?
The source says the GitHub package has no external dependencies and nothing else to install. It lists no prerequisites for cloning this repo.
How do I compile a .scss file to CSS?
Run the sass executable with an input file and an output file, for example sass source/stylesheets/index.scss build/stylesheets/index.css. It compiles .sass and .scss files to .css.
Is there a full Sass language specification in this repo?
No. The README notes that the repo does not contain a full specification. Feature specs are written as needed, so many cover only small parts of a feature.
Where can I learn Sass as a beginner?
The README points to the guide on the Sass website at sass-lang.com/guide. This repo is aimed at implementers, contributors and readers of language design.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this repository if you want to read how Sass features are specified, follow accepted changes, or propose new ones. If you just want to write Sass, install dart-sass or the npm package instead, and use the Sass website guide to learn the language.
Install options & downloads