Sass (style sheet language)

Last updated

Sass
Sass Logo Color.svg
Designed by Hampton Catlin
Developer Natalie Weizenbaum, Chris Eppstein
First appearedNovember 28, 2006;17 years ago (2006-11-28)
Stable release
1.75.0 [1] / April 11, 2024;37 days ago (2024-04-11) [1]
Typing discipline Dynamic
OS Cross-platform
License MIT License
Filename extensions .sass, .scss
Website sass-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.

Contents

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:

Features

Variables

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

SassScript supports four data types: [18]

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. [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-navigationborder-color:$primary-colorcolor:darken($primary-color,10%).borderpadding:$margin/2margin:$margin/2border-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:2em0;td.ln{text-align:right;}}li{font:{family:serif;weight:bold;size:1.3em;}}
table.hlmargin:2em0td.lntext-align:rightlifont:family:serifweight:boldsize:1.3em
table.hl{margin:2em0;}table.hltd.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. [18]

SCSSSassCompiled CSS
@mixin table-base{th{text-align:center;font-weight:bold;}td,th{padding:2px;}}#data{@include table-base;}
=table-basethtext-align:centerfont-weight:boldtd,thpadding:2px#data+table-base
#datath{text-align:center;font-weight:bold;}#datatd,#datath{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$ifrom1to$squareCount#square-#{$i}background-color:redwidth:50px*$iheight: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:leftmargin-left:$dist#data+left(10px)
#data{float:left;margin-left:10px;}

In combination

SassCompiled CSS
=table-basethtext-align:centerfont-weight:boldtd,thpadding:2px=left($dist)float:leftmargin-left:$dist#data+left(10px)+table-base
#data{float:left;margin-left:10px;}#datath{text-align:center;font-weight:bold;}#datatd,#datath{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
.errorborder:1px#f00background:#fdd.error.intrusionfont-size:1.3emfont-weight:bold.badError@extend.errorborder-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. [18]

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
IDESoftware
Adobe Dreamweaver CC 2017
Eclipse
Emacs sass-mode
JetBrains IntelliJ IDEA (Ultimate Edition)
JetBrains PhpStorm
JetBrains RubyMine
JetBrains WebStorm
Microsoft Visual Studio Mindscape
Microsoft Visual Studio SassyStudio
Microsoft WebMatrix
NetBeans
Vim haml.zip
Atom
Visual Studio Code
Sublime
Edit+

See also

Related Research Articles

<span class="mw-page-title-main">JavaScript</span> High-level programming language

JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

Selenium is an open source umbrella project for a range of tools and libraries aimed at supporting browser automation. It provides a playback tool for authoring functional tests across most modern web browsers, without the need to learn a test scripting language. It also provides a test domain-specific language (Selenese) to write tests in a number of popular programming languages, including JavaScript (Node.js), C#, Groovy, Java, Perl, PHP, Python, Ruby and Scala. Selenium runs on Windows, Linux, and macOS. It is open-source software released under the Apache License 2.0.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

Haml is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives you the flexibility to have some dynamic content in HTML. Similar to other template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have a .haml extension. These files are similar to .erb or .eRuby files, which also help embed Ruby code while developing a web application.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Google Closure Tools</span> JavaScript developer toolkit

Google Closure Tools is a set of tools to help developers build rich web applications with JavaScript. It was developed by Google for use in their web applications such as Gmail, Google Docs and Google Maps. As of 2023, the project had over 230K LOCs not counting the embedded Mozilla Rhino compiler.

CoffeeScript is a programming language that compiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python, and Haskell in an effort to enhance JavaScript's brevity and readability. Specific additional features include list comprehension and destructuring assignment.

<span class="mw-page-title-main">Less (style sheet language)</span> Dynamic stylesheet language

Less is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. Less is an open source project. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers is that Less allows real-time compilation via less.js by the browser.

Dart is a programming language designed by Lars Bak and Kasper Lund and developed by Google. It can be used to develop web and mobile apps as well as server and desktop applications.

In software development, a polyfill is code that implements a feature of the development environment that does not natively support the feature. Most often, it refers to JavaScript code that implements an HTML5 or CSS web standard, either an established standard on older browsers, or a proposed standard on existing browsers. Polyfills are also used in PHP and Python.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

<span class="mw-page-title-main">Stylus (style sheet language)</span> Stylesheet preprocessor language

Stylus is a dynamic stylesheet preprocessor language that is compiled into Cascading Style Sheets (CSS). Its design is influenced by Sass and Less. It is regarded as the fourth most used CSS preprocessor syntax. It was created by TJ Holowaychuk, a former programmer for Node.js and the creator of the Luna language. It is written in JADE and Node.js.

Tritium is a simple scripting language for efficiently transforming structured data like HTML, XML, and JSON. It is similar in purpose to XSLT but has a syntax influenced by jQuery, Sass, and CSS versus XSLT's XML based syntax.

<span class="mw-page-title-main">Hampton Lintorn-Catlin</span> American computer programmer

Hampton Lintorn-Catlin is an American computer programmer, programming language inventor, gay rights advocate, and author, best known as the creator of the Sass and Haml markup languages. Hampton was a Vice President of Engineering at Rent the Runway, and has previously held similar roles at Moovweb, Wordset, and at the Wikimedia Foundation. He is currently Chief Technology Officer at Thriveworks.

SCSS may refer to:

<span class="mw-page-title-main">PostCSS</span> Software development tool that uses JavaScript-based plugins to automate routine CSS operations

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

This is a list of articles related to the JavaScript programming language.

References

  1. 1 2 "Dart Sass - latest release". github.com.
  2. 1 2 3 4 5 6 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. 1 2 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 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. 1 2 3 "Sass / Scss". Drupal.org. 2009-10-21. 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. ↑ "node-sass". www.npmjs.com.
  15. ↑ "jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting" . Retrieved 2014-02-23.
  16. ↑ "JSass documentation". jsass.readthedocs.io.
  17. ↑ "SassCompiler (Vaadin 7.0.7 API)". Vaadin.com. 2013-06-06. Archived from the original on 2014-04-21. Retrieved 2014-02-23.
  18. 1 2 3 4 5 Sass (Syntactically Awesome StyleSheets) SASS_REFERENCE
  19. ↑ Module: Sass::Script::Functions Sass Functions
  20. ↑ 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.
  21. 1 2 M. Catlin (2012-04-30). "libsass". Moovweb Blog. Archived from the original on 2013-05-08. Retrieved 2013-07-11.
  22. ↑ 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.
  23. ↑ D. Le Nouaille (2013-06-07). "Sassc and Bourbon" . Retrieved 2013-07-11.
  24. ↑ "Sass Compatibility". sass-compatibility.github.io. Retrieved 2019-11-29.

Further reading

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.