Sass (style sheet language)

Jump to content
From Wikipedia, the free encyclopedia
(Redirected from Sassy CSS)
For the software distribution scheme known as "SaaS", see Software as a service.
Sass
Designed byHampton Catlin
DeveloperNatalie Weizenbaum, Chris Eppstein
First appearedNovember 28, 2006; 19 years ago (2006-11-28)
Stable release
1.97.1[1] / December 19, 2025; 14 days ago (2025-12-19)[1]
Typing disciplineDynamic
OSCross-platform
LicenseMIT License
Filename extensions.sass, .scss
Websitesass-lang.com Edit this at Wikidata
Major implementations
Dart
Influenced by
CSS (both "indented" and SCSS)

YAML and Haml (indented syntax)

Less (SCSS)
Influenced
Less, Stylus, Tritium, Bootstrap (v4+)

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.[2][3] 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.[4]

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.[5]

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,[3] and selector inheritance.[2]

History

[edit]

Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[6][7]

Major implementations

[edit]

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

  • The official open-source Dart implementation.[8]
  • The official "sass" node module on npm, which is Dart Sass compiled to pure JavaScript.[9]
  • The official "sass-embedded" node module which is a JavaScript wrapper around the native Dart executable.[10]
  • The original open-source Ruby implementation created in 2006,[8] since deprecated due to the lack of maintainers and reached End-of-Life in March 2019.[11][12]
  • libSass, the official open-source C++ implementation, (deprecated in October 2020[13] then reached) end-of-life in October 2025.[14]
  • The (deprecated then) end-of-life in July 2024[15] "node-sass" node module on npm, based on the end-of-life (by now) libSass.[16]
  • JSass, an unofficial Java implementation,[17] based on the end-of-life (by now) libSass.[18]
  • phamlp, an unofficial Sass/SCSS implementation in PHP.[8]
  • Vaadin has a Java implementation of Sass.[19]
  • Firebug, a Firefox XUL ("legacy") extension for web development.[20] It has been since (deprecated and then) discontinued in favor of developer tools integrated into Firefox itself. It stopped working since Firefox 57 dropped support for XUL extensions.

Features

[edit]

Variables

[edit]

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

SassScript supports four data types:[20]

  • 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.[21] During translation, the values of the variables are inserted into the output CSS document.[2]

SCSSSassCompiled CSS
$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;}
$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
: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

[edit]

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

SCSSSassCompiled CSS
table.hl { margin: 2em 0; td.ln { text-align: right; }}li { font: { family: serif; weight: bold; size: 1.3em; }}
table.hl  margin: 2em 0 td.ln  text-align: right li  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.[20]

SCSSSassCompiled CSS
@mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px; }}#data { @include table-base;}
=table-base th 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

[edit]

Sass allows for iterating over variables using @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids.

SassCompiled CSS
$squareCount: 4@for $i from 1 to $squareCount  #square-#{$i}  background-color: red width: 50px * $i height: 120px / $i
#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

[edit]

Mixins also support arguments.[2]

SassCompiled CSS
=left($dist)  float: left margin-left: $dist#data  +left(10px)
#data { float: left; margin-left: 10px;}

In combination

[edit]
SassCompiled CSS
=table-base th text-align: center font-weight: bold td, th  padding: 2px=left($dist)  float: left margin-left: $dist#data  +left(10px) +table-base
#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}

Selector inheritance

[edit]

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.[2]

SassCompiled CSS
.error border: 1px #f00 background: #fdd.error.intrusion  font-size: 1.3em font-weight: bold.badError  @extend .error border-width: 3px
.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.[20]

libSass

[edit]

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.[22][23]

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."[24]

The design goals of libSass are:

  • Performance – Developers have reported 10x speed up increases over the Ruby implementation of Sass.[25]
  • 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.[23]
  • Compatibility – libSass's goal is full compatibility with the official Ruby implementation of Sass. This goal has been achieved on libsass 3.3.[26]

IDE integration

[edit]
IDE integration of Sass
IDESoftware
Adobe Dreamweaver CC 2017
Eclipse
Emacssass-mode
JetBrains IntelliJ IDEA (Ultimate Edition)
JetBrains PhpStorm
JetBrains RubyMine
JetBrains WebStorm
Microsoft Visual StudioMindscape
Microsoft Visual StudioSassyStudio
Microsoft WebMatrix
NetBeans
Vimhaml.zip
Atom
Visual Studio Code
Sublime
Edit+

See also

[edit]

References

[edit]
  1. ^ a b "Dart Sass - latest release". github.com.
  2. ^ a b c d e f Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.{{cite web}}: CS1 maint: numeric names: authors list (link)
  3. ^ a b Firtman, Maximiliano (2013-03-15). Programming the Mobile Web. O'Reilly Media, Inc. ISBN 978-1-4493-3497-0.
  4. ^ Libby, Alex (2019). Introducing Dart Sass: A Practical Introduction to the Replacement for Sass, Built on Dart. Berkeley, CA: Apress. doi:10.1007/978-1-4842-4372-5. ISBN 978-1-4842-4371-8.
  5. ^ Sass - Syntactically Awesome Stylesheets Archived 2013-10-09 at the Wayback Machine Tutorial
  6. ^ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
  7. ^ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
  8. ^ a b c "Sass / Scss". Drupal.org. 2009-10-21. Archived from the original on 2016-03-10. Retrieved 2014-02-23.
  9. ^ "sass". www.npmjs.com.
  10. ^ "sass-embedded". www.npmjs.com.
  11. ^ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
  12. ^ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
  13. ^ "LibSass is Deprecated". sass-lang.com. 26 October 2020.
  14. ^ "Sass: LibSass Has Reached End-Of-Life". sass-lang.com. Retrieved 2025-11-18.
  15. ^ "Sass: Node Sass is end-of-life". sass-lang.com. Retrieved 2025-11-18.
  16. ^ "node-sass". www.npmjs.com.
  17. ^ "jsass – A Java implementation of the Sass compiler (and some other goodies). – Google Project Hosting". Retrieved 2014-02-23.
  18. ^ "JSass documentation". jsass.readthedocs.io.
  19. ^ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
  20. ^ a b c d e Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  21. ^ Module: Sass::Script::Functions Sass Functions
  22. ^ H. Catlin (2012-10-15). "Hampton's 6 Rules of Mobile Design". HTML5 Developer Conference. Archived from the original on 2021-12-15. Retrieved 2013-07-11.
  23. ^ a b M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
  24. ^ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml and more with Hampton Catlin". Archived from the original on 2013-08-06. Retrieved 2013-07-30.
  25. ^ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.
  26. ^ "Sass Compatibility". sass-compatibility.github.io. Archived from the original on 2019-12-05. Retrieved 2019-11-29.

Further reading

[edit]
[edit]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Sass_(style_sheet_language)&oldid=1329853605"
    Sass
    Designed byHampton Catlin
    DeveloperNatalie Weizenbaum, Chris Eppstein
    First appearedNovember 28, 2006; 19 years ago (2006-11-28)
    Stable release
    1.97.1[1] / December 19, 2025; 14 days ago (2025-12-19)[1]
    Typing disciplineDynamic
    OSCross-platform
    LicenseMIT License
    Filename extensions.sass, .scss
    Websitesass-lang.com
    Major implementations
    Dart
    Influenced by
    CSS (both "indented" and SCSS)

    YAML and Haml (indented syntax)

    Less (SCSS)
    Influenced
    Less, Stylus, Tritium, Bootstrap (v4+)

    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.[2][3] 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.[4]

    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.[5]

    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,[3] and selector inheritance.[2]

    History

    Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[6][7]

    Major implementations

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

    • The official open-source Dart implementation.[8]
    • The official "sass" node module on npm, which is Dart Sass compiled to pure JavaScript.[9]
    • The official "sass-embedded" node module which is a JavaScript wrapper around the native Dart executable.[10]
    • The original open-source Ruby implementation created in 2006,[8] since deprecated due to the lack of maintainers and reached End-of-Life in March 2019.[11][12]
    • libSass, the official open-source C++ implementation, (deprecated in October 2020[13] then reached) end-of-life in October 2025.[14]
    • The (deprecated then) end-of-life in July 2024[15] "node-sass" node module on npm, based on the end-of-life (by now) libSass.[16]
    • JSass, an unofficial Java implementation,[17] based on the end-of-life (by now) libSass.[18]
    • phamlp, an unofficial Sass/SCSS implementation in PHP.[8]
    • Vaadin has a Java implementation of Sass.[19]
    • Firebug, a Firefox XUL ("legacy") extension for web development.[20] It has been since (deprecated and then) discontinued 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 (:).[20]

    SassScript supports four data types:[20]

    • 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.[21] During translation, the values of the variables are inserted into the output CSS document.[2]

    SCSSSassCompiled CSS
    $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;}
    $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
    :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.[2]

    SCSSSassCompiled CSS
    table.hl { margin: 2em 0; td.ln { text-align: right; }}li { font: { family: serif; weight: bold; size: 1.3em; }}
    table.hl  margin: 2em 0 td.ln  text-align: right li  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.[20]

    SCSSSassCompiled CSS
    @mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px; }}#data { @include table-base;}
    =table-base th 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 @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids.

    SassCompiled CSS
    $squareCount: 4@for $i from 1 to $squareCount  #square-#{$i}  background-color: red width: 50px * $i height: 120px / $i
    #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.[2]

    SassCompiled CSS
    =left($dist)  float: left margin-left: $dist#data  +left(10px)
    #data { float: left; margin-left: 10px;}

    In combination

    SassCompiled CSS
    =table-base th text-align: center font-weight: bold td, th  padding: 2px=left($dist)  float: left margin-left: $dist#data  +left(10px) +table-base
    #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.[2]

    SassCompiled CSS
    .error border: 1px #f00 background: #fdd.error.intrusion  font-size: 1.3em font-weight: bold.badError  @extend .error border-width: 3px
    .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.[20]

    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.[22][23]

    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."[24]

    The design goals of libSass are:

    • Performance – Developers have reported 10x speed up increases over the Ruby implementation of Sass.[25]
    • 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.[23]
    • Compatibility – libSass's goal is full compatibility with the official Ruby implementation of Sass. This goal has been achieved on libsass 3.3.[26]

    IDE integration

    IDE integration of Sass
    IDESoftware
    Adobe Dreamweaver CC 2017
    Eclipse
    Emacssass-mode
    JetBrains IntelliJ IDEA (Ultimate Edition)
    JetBrains PhpStorm
    JetBrains RubyMine
    JetBrains WebStorm
    Microsoft Visual StudioMindscape
    Microsoft Visual StudioSassyStudio
    Microsoft WebMatrix
    NetBeans
    Vimhaml.zip
    Atom
    Visual Studio Code
    Sublime
    Edit+

    See also

    References

    1. ^ a b "Dart Sass - latest release". github.com.
    2. ^ a b c d e f Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.{{cite web}}: CS1 maint: numeric names: authors list (link)
    3. ^ a b Firtman, Maximiliano (2013-03-15). Programming the Mobile Web. O'Reilly Media, Inc. ISBN 978-1-4493-3497-0.
    4. ^ Libby, Alex (2019). Introducing Dart Sass: A Practical Introduction to the Replacement for Sass, Built on Dart. Berkeley, CA: Apress. doi:10.1007/978-1-4842-4372-5. ISBN 978-1-4842-4371-8.
    5. ^ Sass - Syntactically Awesome Stylesheets Archived 2013-10-09 at the Wayback Machine Tutorial
    6. ^ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
    7. ^ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
    8. ^ a b c "Sass / Scss". Drupal.org. 2009-10-21. Archived from the original on 2016-03-10. Retrieved 2014-02-23.
    9. ^ "sass". www.npmjs.com.
    10. ^ "sass-embedded". www.npmjs.com.
    11. ^ Weizenbaum, Natalie. "Ruby Sass Has Reached End-Of-Life « Sass Blog". sass.logdown.com. Retrieved 2019-04-21.
    12. ^ "Sass: Ruby Sass". sass-lang.com. Retrieved 2019-04-21.
    13. ^ "LibSass is Deprecated". sass-lang.com. 26 October 2020.
    14. ^ "Sass: LibSass Has Reached End-Of-Life". sass-lang.com. Retrieved 2025-11-18.
    15. ^ "Sass: Node Sass is end-of-life". sass-lang.com. Retrieved 2025-11-18.
    16. ^ "node-sass". www.npmjs.com.
    17. ^ "jsass – A Java implementation of the Sass compiler (and some other goodies). – Google Project Hosting". Retrieved 2014-02-23.
    18. ^ "JSass documentation". jsass.readthedocs.io.
    19. ^ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
    20. ^ a b c d e Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
    21. ^ Module: Sass::Script::Functions Sass Functions
    22. ^ H. Catlin (2012-10-15). "Hampton's 6 Rules of Mobile Design". HTML5 Developer Conference. Archived from the original on 2021-12-15. Retrieved 2013-07-11.
    23. ^ a b M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
    24. ^ A. Stacoviak & A. Thorp (2013-06-26). "Sass, libsass, Haml and more with Hampton Catlin". Archived from the original on 2013-08-06. Retrieved 2013-07-30.
    25. ^ D. Le Nouaille (2013-06-07). "Sassc and Bourbon". Retrieved 2013-07-11.
    26. ^ "Sass Compatibility". sass-compatibility.github.io. Archived from the original on 2019-12-05. Retrieved 2019-11-29.

    Further reading

    • Ndia, John Gichuki; Muketha, Geoffrey Muchiri; Omieno, Kelvin Kabeti (2019). "Complexity Metrics for Sassy Cascading Style Sheets" (PDF). Baltic Journal of Modern Computing. 7 (4). doi:10.22364/bjmc.2019.7.4.01.
    • Cederholm, Dan (2013). Sass for Web Designers (PDF). A Book Apart. ISBN 978-1-937557-13-3.
    • Watts, Luke (2016). Mastering Sass. Packt Publishing.
    • Official website
    Retrieved from "https://en.wikipedia.org/w/index.php?title=Sass_(style_sheet_language)&oldid=1329853605"