Sass(short forsyntactically awesome style sheets) is apreprocessorscripting languagethat isinterpretedorcompiledintoCascading Style Sheets(CSS). SassScript is the scripting language itself.
 | |
| Designed by | Hampton Catlin |
|---|---|
| Developer | Natalie Weizenbaum, Chris Eppstein |
| First appeared | November 28, 2006 |
| Stable release | |
| Typing discipline | Dynamic |
| OS | Cross-platform |
| License | MIT License |
| Filename extensions | .sass,.scss |
| Website | sass-lang |
| Majorimplementations | |
| Dart | |
| Influenced by | |
| CSS(both "indented" and SCSS) Less(SCSS) | |
| Influenced | |
| Less,Stylus,Tritium,Bootstrap (v4+) | |
Sass consists of twosyntaxes.The original syntax, called "the indented syntax," uses a syntax similar toHaml.[2][3]It usesindentationto separatecode blocksandnewlinecharacters 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 theextensions.sass and.scss, respectively.[4]
CSS3consists 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 traditionalprogramming languages,particularlyobject-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 anested metalanguageand asupersetof CSS, as valid CSS is valid SCSS with the samesemantics.
SassScript provides the following mechanisms:variables,nesting,mixins,[3]and selectorinheritance.[2]
History
editSass was initially designed byHampton Catlinand developed by Natalie Weizenbaum.[6][7]
Major implementations
editSassScript was implemented in multiple languages, the noteworthy implementations are:
- The official open-sourceDartimplementation.[8]
- The official "sass"nodemodule onnpm,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 originalopen-sourceRubyimplementation 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-sourceC++implementation, deprecated in October 2020.[13]
- The deprecated "node-sass" node module onnpm,based on the deprecated libSass.[14]
- JSass, an unofficialJavaimplementation,[15]based on the deprecated libSass.[16]
- phamlp, an unofficial Sass/SCSS implementation inPHP.[8]
- Vaadinhas a Java implementation of Sass.[17]
- Firebug,aFirefoxXUL( "legacy" )extensionfor web development.[18]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
editVariables
editSass allows variables to be defined. Variables begin with adollar sign($). Variableassignmentis done with acolon(:).[18]
SassScript supports four data types:[18]
Variables can beargumentsto or results from one of several availablefunctions.[19]During translation, the values of the variables are inserted into the output CSS document.[2]
| SCSS | Sass | Compiled 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
editCSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.[2]
| SCSS | Sass | Compiled CSS |
|---|---|---|
table.hl{
margin:2em0;
td.ln{
text-align:right;
}
}
li{
font:{
family:serif;
weight:bold;
size:1.3em;
}
}
|
table.hl
margin:2em0
td.ln
text-align:right
li
font:
family:serif
weight:bold
size: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 includingnamespacenesting and parent references are discussed in the Sass documentation.[18]
| SCSS | Sass | Compiled CSS |
|---|---|---|
@mixintable-base{
th{
text-align:center;
font-weight:bold;
}
td,th{
padding:2px;
}
}
#data{
@includetable-base;
}
|
=table-base
th
text-align:center
font-weight:bold
td,th
padding:2px
#data
+table-base
|
#datath{
text-align:center;
font-weight:bold;
}
#datatd,#datath{
padding:2px;
}
|
Loops
editSass allows for iterating over variables using@for,@eachand@while,which can be used to apply different styles to elements with similar classes or ids.
| Sass | Compiled CSS |
|---|---|
$squareCount:4
@for$ifrom1to$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
editMixins also supportarguments.[2]
| Sass | Compiled CSS |
|---|---|
=left($dist)
float:left
margin-left:$dist
#data
+left(10px)
|
#data{
float:left;
margin-left:10px;
}
|
In combination
edit| Sass | Compiled 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;
}
#datath{
text-align:center;
font-weight:bold;
}
#datatd,#datath{
padding:2px;
}
|
Selector inheritance
editWhile CSS3 supports theDocument 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]
| Sass | Compiled 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 supportsmultiple inheritance.[18]
libSass
editAt 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 atMoovweb.[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:
- Performance – Developers have reported 10x speed up increases over the Ruby implementation of Sass.[23]
- 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 forNode,Go,andRuby.[21]
- Compatibility – libSass's goal is full compatibility with the official Ruby implementation of Sass. This goal has been achieved on libsass 3.3.[24]
IDE integration
edit| IDE | Software |
|---|---|
| Adobe DreamweaverCC 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
editReferences
edit- ^ab"Dart Sass - latest release".github.com.
- ^abcdefMedia Mark (3.2.12)."Sass - Syntactically Awesome Stylesheets".Sass-lang.com.Retrieved2014-02-23.
{{cite web}}:CS1 maint: numeric names: authors list (link) - ^abFirtman, Maximiliano (2013-03-15).Programming the Mobile Web.O'Reilly Media, Inc.ISBN978-1-4493-3497-0.
- ^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.ISBN978-1-4842-4371-8.
- ^Sass - Syntactically Awesome StylesheetsArchived2013-10-09 at theWayback MachineTutorial
- ^"Sass: Syntactically Awesome Style Sheets".sass-lang.com.Archived fromthe originalon 2013-09-01.
- ^"Natalie Weizenbaum's blog".Archived fromthe originalon 2007-10-11.
- ^abc"Sass / Scss".Drupal.org. 2009-10-21. Archived fromthe originalon 2016-03-10.Retrieved2014-02-23.
- ^"sass".www.npmjs.com.
- ^"sass-embedded".www.npmjs.com.
- ^Weizenbaum, Natalie."Ruby Sass Has Reached End-Of-Life « Sass Blog".sass.logdown.com.Retrieved2019-04-21.
- ^"Sass: Ruby Sass".sass-lang.com.Retrieved2019-04-21.
- ^"LibSass is Deprecated".sass-lang.com.26 October 2020.
- ^"node-sass".www.npmjs.com.
- ^"jsass - A Java implementation of the Sass compiler (and some other goodies). - Google Project Hosting".Retrieved2014-02-23.
- ^"JSass documentation".jsass.readthedocs.io.
- ^"SassCompiler (Vaadin 7.0.7 API)".Vaadin.com. 2013-06-06. Archived fromthe originalon 2014-04-21.Retrieved2014-02-23.
- ^abcdeSass (Syntactically Awesome StyleSheets)SASS_REFERENCE
- ^Module: Sass::Script::FunctionsSass Functions
- ^H. Catlin (2012-10-15)."Hampton's 6 Rules of Mobile Design".HTML5 Developer Conference.Archivedfrom the original on 2021-12-15.Retrieved2013-07-11.
- ^abM. Catlin (2012-04-30)."libsass".Moovweb Blog. Archived fromthe originalon 2013-05-08.Retrieved2013-07-11.
- ^A. Stacoviak & A. Thorp (2013-06-26)."Sass, libsass, Haml and more with Hampton Catlin".Archived fromthe originalon 2013-08-06.Retrieved2013-07-30.
- ^D. Le Nouaille (2013-06-07)."Sassc and Bourbon".Retrieved2013-07-11.
- ^"Sass Compatibility".sass-compatibility.github.io.Archived fromthe originalon 2019-12-05.Retrieved2019-11-29.
Further reading
edit- 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.ISBN978-1-937557-13-3.
- Watts, Luke (2016).Mastering Sass.Packt Publishing.
