Description
Sass has two syntaxes. The new main syntax (as of Sass 3)
is known as "SCSS" (for "Sassy CSS"),
and is a superset of CSS's syntax.
This means that every valid CSS stylesheet is valid SCSS as well.
SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just "Sass").
Inspired by Haml's terseness, it's intended for people
who prefer conciseness over similarity to CSS.
Instead of brackets and semicolons,
it uses the indentation of lines to specify blocks.
Although no longer the primary syntax,
the indented syntax will continue to be supported.
Files in the indented syntax use the extension .sass.
Sass alternatives and similar gems
Based on the "Assets" category.
Alternatively, view Sass alternatives based on common mentions on social networks and blogs.
-
Compass
Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.
WorkOS - The modern identity platform for B2B SaaS
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Sass or a related project?
Popular Comparisons
README
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.
$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
.
That's all—there are no external dependencies and nothing else you need to
install.
If you use Node.js, you can also install Sass using npm by running
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:
spec/
, which contains specifications for language features.proposal/
, which contains in-progress proposals for changes to the language.accepted/
, which contains proposals that have been accepted and are either implemented or in the process of being implemented.
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.<name>.draft-<version>
. 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 <major>.<minor>
). 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.