Sass (style sheet language)

{{For|the software distribution scheme known as "SaaS"|Software as a service}}

{{Infobox programming language

| name = Sass

| logo = Sass Logo Color.svg

| designer = Hampton Catlin

| developer = Natalie Weizenbaum, Chris Eppstein

| typing = Dynamic

| implementations = Dart

| influenced = Less, Stylus, Tritium, Bootstrap (v4+)

| license = MIT License

| website = {{URL|https://sass-lang.com/}}

| released = {{Start date and age|2006|11|28}}

| latest_release_version = 1.89.1{{cite web|url=https://github.com/sass/dart-sass/blob/main/CHANGELOG.md|title=Dart Sass - latest release|website=github.com}}

| latest_release_date = {{Start date and age|2025|05|31}}

| influenced_by = CSS (both "indented" and SCSS)

YAML and Haml (indented syntax)

Less (SCSS)

| operating_system = Cross-platform

| file_ext = .sass, .scss

}}

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml.{{cite web |author=Media Mark (3.2.12) |title=Sass - Syntactically Awesome Stylesheets |url=http://sass-lang.com/ |access-date=2014-02-23 |publisher=Sass-lang.com |language=en-US}} It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.{{Cite book |last=Libby |first=Alex |date=2019 |title=Introducing Dart Sass: A Practical Introduction to the Replacement for Sass, Built on Dart |url=http://link.springer.com/10.1007/978-1-4842-4372-5 |language=en |location=Berkeley, CA |publisher=Apress |doi=10.1007/978-1-4842-4372-5 |isbn=978-1-4842-4371-8}}

CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternatively, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.[http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets] {{Webarchive|url=https://web.archive.org/web/20131009053354/http://sass-lang.com/tutorial.html |date=2013-10-09 }} Tutorial

The indented syntax is a metalanguage. SCSS is a nested metalanguage and a superset of CSS, as valid CSS is valid SCSS with the same semantics.

SassScript provides the following mechanisms: variables, nesting, mixins,{{Cite book |last=Firtman |first=Maximiliano |url=https://books.google.com/books?id=gswdarRZVUoC |title=Programming the Mobile Web |date=2013-03-15 |publisher=O'Reilly Media, Inc. |isbn=978-1-4493-3497-0 |language=en}} and selector inheritance.

History

Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum.{{cite web|title=Sass: Syntactically Awesome Style Sheets|url=http://sass-lang.com/about.html|url-status=dead|archive-url=https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html|archive-date=2013-09-01|work=sass-lang.com}}{{cite web|title=Natalie Weizenbaum's blog|url=http://nex-3.com/|url-status=dead|archive-url=https://web.archive.org/web/20071011121541/http://nex-3.com/|archive-date=2007-10-11}}

Major implementations

SassScript was implemented in multiple languages, the noteworthy implementations are:

The official open-source Dart implementation.
The official "sass" node module on npm, which is Dart Sass compiled to pure JavaScript.{{cite web|url=https://www.npmjs.com/package/sass|title=sass|website=www.npmjs.com}}
The official "sass-embedded" node module which is a JavaScript wrapper around the native Dart executable.{{cite web|url=https://www.npmjs.com/package/sass-embedded|title=sass-embedded|website=www.npmjs.com}}
The original open-source Ruby implementation created in 2006,{{cite web|url=http://drupal.org/project/sass|title=Sass / Scss|date=2009-10-21|publisher=Drupal.org|access-date=2014-02-23|archive-date=2016-03-10|archive-url=https://web.archive.org/web/20160310210318/https://www.drupal.org/project/sass|url-status=dead}} since deprecated due to the lack of maintainers and reached End-of-Life in March 2019.{{Cite web|url=http://sass.logdown.com/posts/7828841-ruby-sass-is-unsupported|title=Ruby Sass Has Reached End-Of-Life « Sass Blog|last=Weizenbaum|first=Natalie|website=sass.logdown.com|access-date=2019-04-21}}{{Cite web|url=https://sass-lang.com/ruby-sass|title=Sass: Ruby Sass|website=sass-lang.com|access-date=2019-04-21}}
libSass, the official open-source C++ implementation, deprecated in October 2020.{{cite web|url=https://sass-lang.com/blog/libsass-is-deprecated|title=LibSass is Deprecated|website=sass-lang.com|date=26 October 2020}}
The deprecated "node-sass" node module on npm, based on the deprecated libSass.{{cite web|url=https://www.npmjs.com/package/node-sass|title=node-sass|website=www.npmjs.com}}
JSass, an unofficial Java implementation,{{cite web|url=https://code.google.com/p/jsass/|title=jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting|access-date=2014-02-23}} based on the deprecated libSass.{{cite web|url=https://jsass.readthedocs.io/en/latest/|title=JSass documentation|website=jsass.readthedocs.io}}
phamlp, an unofficial Sass/SCSS implementation in PHP.
Vaadin has a Java implementation of Sass.{{cite web|url=https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html|title=SassCompiler (Vaadin 7.0.7 API)|date=2013-06-06|publisher=Vaadin.com|access-date=2014-02-23|archive-date=2014-04-21|archive-url=https://web.archive.org/web/20140421052745/https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html|url-status=dead}}
Firebug, a Firefox XUL ("legacy") extension for web development.[http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)] SASS_REFERENCE It has been since deprecated in favor of developer tools integrated into Firefox itself. It stopped working since Firefox 57 dropped support for XUL extensions.

Features

= Variables =

Sass allows variables to be defined. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:).

SassScript supports four data types:

Numbers (including units)
Strings (with quotes or without)
Colors (name, or names)
Booleans

Variables can be arguments to or results from one of several available functions.[http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions] Sass Functions During translation, the values of the variables are inserted into the output CSS document.

class="wikitable"

!SCSS

!Sass

!Compiled CSS

style="vertical-align: top;" |

$primary-color: #3bbfce;

$margin: 16px;

.content-navigation {

border-color: $primary-color;

color: darken($primary-color, 10%);

}

.border {

padding: $margin / 2;

margin: $margin / 2;

border-color: $primary-color;

}

| style="vertical-align: top;" |

$primary-color: #3bbfce

$margin: 16px

.content-navigation

border-color: $primary-color

color: darken($primary-color, 10%)

.border

padding: $margin/2

margin: $margin/2

border-color: $primary-color

| style="vertical-align: top;" |

:root{

--primary-color:#3bbfce;

--secondary-color:#2b9eab;

--margin:8px;

}

.content-navigation {

border-color: var(--secondary-color)

color: var(--secondary-color);

}

.border {

padding: 8px;

margin: var(--margin);

border-color: #3bbfce;

}

= Nesting =

CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.

class="wikitable"

!SCSS

!Sass

!Compiled CSS

style="vertical-align: top;" |

table.hl {

margin: 2em 0;

td.ln {

text-align: right;

}

li {

font: {

family: serif;

weight: bold;

size: 1.3em;

}

| style="vertical-align: top;" |

table.hl

margin: 2em 0

td.ln

text-align: right

font:

family: serif

weight: bold

size: 1.3em

table.hl {

margin: 2em 0;

}

table.hl td.ln {

text-align: right;

}

li {

font-family: serif;

font-weight: bold;

font-size: 1.3em;

}

More complicated types of nesting including namespace nesting and parent references are discussed in the Sass documentation.

class="wikitable"

!SCSS

!Sass

!Compiled CSS

style="vertical-align: top;" |

@mixin table-base {

th {

text-align: center;

font-weight: bold;

}

td, th {

padding: 2px;

}

data {

@include table-base;

}

| style="vertical-align: top;" |

=table-base

text-align: center

font-weight: bold

td, th

padding: 2px

data

+table-base

data th {

text-align: center;

font-weight: bold;

}

data td, #data th {

padding: 2px;

}

== Loops ==

Sass allows for iterating over variables using {{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}} and {{code|lang=sass|code=@while}}, which can be used to apply different styles to elements with similar classes or ids.

class="wikitable"

!Sass

!Compiled CSS

style="vertical-align: top;" |

$squareCount: 4

@for $i from 1 to $squareCount

#square-#{$i}

background-color: red

width: 50px * $i

height: 120px / $i

| style="vertical-align: top;" |

square-1 {

background-color: red;

width: 50px;

height: 120px;

}

square-2 {

background-color: red;

width: 100px;

height: 60px;

}

square-3 {

background-color: red;

width: 150px;

height: 40px;

}

== Arguments ==

Mixins also support arguments.

class="wikitable"

!Sass

!Compiled CSS

style="vertical-align: top;" |

=left($dist)

float: left

margin-left: $dist

data

+left(10px)

data {

float: left;

margin-left: 10px;

}

== In combination ==

class="wikitable"

!Sass

!Compiled CSS

style="vertical-align: top;" |

=table-base

text-align: center

font-weight: bold

td, th

padding: 2px

=left($dist)

float: left

margin-left: $dist

data

+left(10px)

+table-base

| style="vertical-align: top;" |

data {

float: left;

margin-left: 10px;

}

data th {

text-align: center;

font-weight: bold;

}

data td, #data th {

padding: 2px;

}

= Selector inheritance =

While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. In Sass, inheritance is achieved by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.

class="wikitable"

!Sass

!Compiled CSS

style="vertical-align: top;" |

.error

border: 1px #f00

background: #fdd

.error.intrusion

font-size: 1.3em

font-weight: bold

.badError

@extend .error

border-width: 3px

| style="vertical-align: top;" |

.error, .badError {

border: 1px #f00;

background: #fdd;

}

.error.intrusion,

.badError.intrusion {

font-size: 1.3em;

font-weight: bold;

}

.badError {

border-width: 3px;

}

Sass supports multiple inheritance.

libSass

At the 2012 HTML5 Developer Conference, Hampton Catlin, the creator of Sass, announced version 1.0 of libSass, an open source C++ implementation of Sass developed by Catlin, Aaron Leung, and the engineering team at Moovweb.{{cite web|url=https://www.youtube.com/watch?v=j75-SslllvY&feature=player_detailpage#t=1831s |archive-url=https://ghostarchive.org/varchive/youtube/20211215/j75-SslllvY |archive-date=2021-12-15 |url-status=live|title=Hampton's 6 Rules of Mobile Design|author=H. Catlin|date=2012-10-15|publisher=HTML5 Developer Conference|access-date=2013-07-11}}{{cbignore}}{{cite web

|url = http://blog.moovweb.com/2012/04/libsass/

|title = libsass

|publisher = Moovweb Blog

|date = 2012-04-30

|access-date = 2013-07-11

|author = M. Catlin

|url-status = dead

|archive-url = https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/

|archive-date = 2013-05-08

}}

According to Catlin, libSass can be "drop[ped] into anything and it will have Sass in it...You could drop it right into Firefox today and build Firefox and it will compile in there. We wrote our own parser from scratch to make sure that would be possible."{{cite web

| url=http://5by5.tv/changelog/94

| title=Sass, libsass, Haml and more with Hampton Catlin

| date=2013-06-26

| access-date=2013-07-30

| author=A. Stacoviak & A. Thorp

| archive-date=2013-08-06

| archive-url=https://web.archive.org/web/20130806073554/http://5by5.tv/changelog/94

| url-status=dead

}}

The design goals of libSass are:

Performance – Developers have reported 10x speed up increases over the Ruby implementation of Sass.{{cite web

| url=http://www.damln.com/log/sassc-and-bourbon-it-works/

| title=Sassc and Bourbon

| date=2013-06-07

| access-date=2013-07-11

| author=D. Le Nouaille

}}

Easier integration – libSass makes it easier to integrate Sass into more software. Before libSass, tightly integrating Sass into a language or software product required bundling the entire Ruby interpreter. By contrast, libSass is a statically linkable library with zero external dependencies and C-like interface, making it easy to wrap Sass directly into other programming languages and tools. For example, open source libSass bindings now exist for Node, Go, and Ruby.
Compatibility – libSass's goal is full compatibility with the official Ruby implementation of Sass. This goal has been achieved on libsass 3.3.{{Cite web|url=http://sass-compatibility.github.io/|title=Sass Compatibility|website=sass-compatibility.github.io|access-date=2019-11-29|archive-date=2019-12-05|archive-url=https://web.archive.org/web/20191205161602/http://sass-compatibility.github.io/|url-status=dead}}

IDE integration

class="wikitable" \|+IDE integration of Sass
scope="col" \|IDE	scope="col" \|Software
scope="row" \|Adobe Dreamweaver CC 2017 \|
scope="row" \| Eclipse \|
scope="row" \| Emacs \| sass-mode
scope="row" \| JetBrains IntelliJ IDEA (Ultimate Edition) \|
scope="row" \| JetBrains PhpStorm \|
scope="row" \| JetBrains RubyMine \|
scope="row" \| JetBrains WebStorm \|
scope="row" \| Microsoft Visual Studio \| Mindscape
scope="row" \| Microsoft Visual Studio \| SassyStudio
scope="row" \| Microsoft WebMatrix \|
scope="row" \| NetBeans \|
scope="row" \| Vim \| haml.zip
scope="row" \| Atom \|
scope="row" \| Visual Studio Code \|
scope="row" \|Sublime \|
scope="row" \| Edit+ \|

class="wikitable"

|+IDE integration of Sass

scope="col" |IDE

scope="col" |Software

scope="row" |Adobe Dreamweaver CC 2017

scope="row" | Eclipse

scope="row" | Emacs

| sass-mode

scope="row" | JetBrains IntelliJ IDEA (Ultimate Edition)

scope="row" | JetBrains PhpStorm

scope="row" | JetBrains RubyMine

scope="row" | JetBrains WebStorm