Sass (stylesheet language)

Sass
Sass Logo Color.svg
Designed byHampton Catlin
DeveloperNatalie Weizenbaum, Chris Eppstein
First appearedNovember 28, 2006 (2006-11-28)
Stable release
3.5.6 / March 23, 2018 (2018-03-23)[1]
Typing disciplineDynamic
OSCross-platform
LicenseMIT License
Filename extensions.sass, .scss
Websitesass-lang.com
Major implementations
Dart, Ruby
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 style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[2][3] After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a scripting language used in Sass files.

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

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, as valid CSS is valid SCSS with the same semantics.

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.[4]

  1. ^ Latest releases
  2. ^ "Sass: Syntactically Awesome Style Sheets". sass-lang.com. Archived from the original on 2013-09-01.
  3. ^ "Natalie Weizenbaum's blog". Archived from the original on 2007-10-11.
  4. ^ a b Media Mark (3.2.12). "Sass - Syntactically Awesome Stylesheets". Sass-lang.com. Retrieved 2014-02-23.
  5. ^ Sass - Syntactically Awesome Stylesheets Tutorial

Powered by 654 easy search