Sass - Stylesheet language

home terminal edit

Sass, aka syntactically awesome stylesheets, is an open source stylesheet language created in 2006 by Hampton Lintorn-Catlin.

#140on PLDB

18Years Old

9kRepos

Homepage · Leet Sheet · REPL · Wikipedia · Twitter · Docs

Sass (syntactically awesome stylesheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein continued to extend Sass with SassScript, a simple scripting language used in Sass files. Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Read more on Wikipedia...

Tags: stylesheetLanguage
There are at least 8,972 Sass repos on GitHub
Early development of Sass happened in https://github.com/sass
The Google BigQuery Public Dataset GitHub snapshot shows 439 users using Sass in 466 repos on GitHub
CodeMirror package for syntax highlighting Sass
Pygments supports syntax highlighting for Sass
GitHub supports syntax highlighting for Sass
sass-lang.com was registered in 2009
See also: (15 related languages) Ruby, YAML, HAML, Less, Stylus, CSS, PHP, C, Java, Go, Eclipse, Emacs, Visual Studio, Vim, Visual Studio Code
2 PLDB concepts link to Sass: Ace Editor, txtzyme

Example from Riju:

body:before
  content: "Hello, world!"

Example from hello-world:

body::before
	content: "Hello World"

Example from Linguist:

$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

Example from Wikipedia:

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Language features

Feature	Supported	Example	Token
Strings	✓	"Hello world"	"
Mixins	✓	@mixin reset-list margin: 0 padding: 0 list-style: none @mixin horizontal-list @include reset-list li display: inline-block margin: left: -2px right: 2em nav ul @include horizontal-list
Semantic Indentation	✓