Sass (style sheet language) explained

Sass
Designer:Hampton Catlin
Developer:Natalie Weizenbaum, Chris Eppstein
Typing:Dynamic
Implementations:Dart
Influenced:Less, Stylus, Tritium, Bootstrap (v4+)
License:MIT License
Latest Release Version:1.75.0[1]
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.[2] 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.[3]

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

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

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:

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:

Variables can be arguments to or results from one of several available functions.[19] During translation, the values of the variables are inserted into the output CSS document.

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.

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

Loops

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

Arguments

Mixins also support arguments.

In combination

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.

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.[20] [21]

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

The design goals of libSass are:

IDE integration

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

See also

Further reading

Notes and References

  1. Web site: Dart Sass - latest release. github.com.
  2. Web site: Media Mark (3.2.12) . Sass - Syntactically Awesome Stylesheets . 2014-02-23 . Sass-lang.com . en-US.
  3. Book: Libby, Alex . 2019 . Introducing Dart Sass: A Practical Introduction to the Replacement for Sass, Built on Dart . en . Berkeley, CA . Apress . 10.1007/978-1-4842-4372-5 . 978-1-4842-4371-8.
  4. http://sass-lang.com/tutorial.html Sass - Syntactically Awesome Stylesheets
  5. Book: Firtman, Maximiliano . Programming the Mobile Web . 2013-03-15 . O'Reilly Media, Inc. . 978-1-4493-3497-0 . en.
  6. Web site: Sass: Syntactically Awesome Style Sheets. dead. https://web.archive.org/web/20130901145805/http://sass-lang.com/about.html. 2013-09-01. sass-lang.com.
  7. Web site: Natalie Weizenbaum's blog. dead. https://web.archive.org/web/20071011121541/http://nex-3.com/. 2007-10-11.
  8. Web site: sass. www.npmjs.com.
  9. Web site: sass-embedded. www.npmjs.com.
  10. Web site: Sass / Scss. 2009-10-21. Drupal.org. 2014-02-23.
  11. Web site: Ruby Sass Has Reached End-Of-Life « Sass Blog. Weizenbaum. Natalie. sass.logdown.com. 2019-04-21.
  12. Web site: Sass: Ruby Sass. sass-lang.com. 2019-04-21.
  13. Web site: LibSass is Deprecated. sass-lang.com. 26 October 2020.
  14. Web site: node-sass. www.npmjs.com.
  15. Web site: jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting. 2014-02-23.
  16. Web site: JSass documentation. jsass.readthedocs.io.
  17. Web site: SassCompiler (Vaadin 7.0.7 API). 2013-06-06. Vaadin.com. 2014-02-23. 2014-04-21. https://web.archive.org/web/20140421052745/https://vaadin.com/api/7.0.7/com/vaadin/sass/SassCompiler.html. dead.
  18. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html Sass (Syntactically Awesome StyleSheets)
  19. http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Module: Sass::Script::Functions
  20. Web site: Hampton's 6 Rules of Mobile Design. https://ghostarchive.org/varchive/youtube/20211215/j75-SslllvY . 2021-12-15 . live. H. Catlin. 2012-10-15. HTML5 Developer Conference. 2013-07-11.
  21. Web site: libsass . Moovweb Blog . 2012-04-30 . 2013-07-11 . M. Catlin . dead . https://web.archive.org/web/20130508080521/http://blog.moovweb.com/2012/04/libsass/ . 2013-05-08.
  22. Web site: Sass, libsass, Haml and more with Hampton Catlin . 2013-06-26 . 2013-07-30 . A. Stacoviak & A. Thorp . 2013-08-06 . https://web.archive.org/web/20130806073554/http://5by5.tv/changelog/94 . dead .
  23. Web site: Sassc and Bourbon . 2013-06-07 . 2013-07-11 . D. Le Nouaille.
  24. Web site: Sass Compatibility. sass-compatibility.github.io. 2019-11-29.