computer science

Sass (style sheet language)

Sass (style sheet language) is a computer science topic covered in the lgStudy science library. This page brings together a partial reference excerpt, illustrations, worked examples, real-world applications and a short study plan, so you can understand Sass (style sheet language) rather than just read about it. In short: 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.

Key takeaways

Sass (style sheet language) belongs to computer science; place it in that map before memorising details.
Learn the definition first, then one example that makes the definition concrete.
Connect Sass (style sheet language) to a quantity you can measure, compute or draw — that is where exam questions come from.
Reproduce the core statement of Sass (style sheet language) from memory before moving on to harder problems.

Reference excerpt

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

History Sass was initially designed by Hampton Catlin and developed by Natalie Weizenbaum.

Major implementations SassScript was implemented in multiple languages, the noteworthy implementations are:

The official open-source Dart implementation. The official "sass" node module on npm, which is Dart Sass compiled to pure JavaScript. The official "sass-embedded" node module which is a JavaScript wrapper around the native Dart executable. The original open-source Ruby implementation created in 2006, since deprecated due to the lack of maintainers and reached End-of-Life in March 2019. libSass, the official open-source C++ implementation, (deprecated in October 2020 then reached) end-of-life in October 2025. The (deprecated then) end-of-life in July 2024 "node-sass" node module on npm, based on the end-of-life (by now) libSass. JSass, an unofficial Java implementation, based on the end-of-life (by now) libSass. phamlp, an unofficial Sass/SCSS implementation in PHP. Vaadin has a Java implementation of Sass. Firebug, a Firefox XUL ("legacy") extension for web development. It has been since (deprecated and then) discontinued in favor of developer tools integrated into Firefox itself. It stopped working since Firefox 57 dropped support for XUL extensions.

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:

Numbers (including units) Strings (with quotes or without) Colors (name, or names) Booleans Variables can be arguments to or results from one of several available functions. 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 @for, @each and @while, 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. 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." The design goals of libSass are:

Performance – Developers have reported 10x speed up increases over the Ruby implementation of Sass. 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 for Node, Go, and Ruby. Compatibility – libSass's goal is full compatibility with the official Ruby implementation of Sass. This goal has been achieved on libsass 3.3.

IDE integration

See also Less (style sheet language) Stylus (style sheet language)

References

Further reading 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. ISBN 978-1-937557-13-3. Watts, Luke (2016). Mastering Sass. Packt Publishing.

External links Official website

Illustrations

Worked examples

Example 1 — a first encounter with Sass (style sheet language)

Start with the simplest possible case. Write down what Sass (style sheet language) claims or describes in one sentence, then invent the smallest concrete situation in which that sentence is true. In computer science, the smallest case is usually a single object, a single equation or a single measurement. Check that every symbol or term in your sentence has a meaning in that case.

Example 2 — changing one variable

Take the situation from Example 1 and change exactly one quantity: double it, halve it, or set it to zero. Predict what should happen to Sass (style sheet language) before you calculate. Comparing your prediction with the result is the fastest way to find out whether you understand the idea or only the words.

Example 3 — an exam-style question

Typical questions about Sass (style sheet language) ask you to (a) state it precisely, (b) apply it to given data, and (c) explain a limitation. Practise writing all three answers in under five minutes; the third part is what separates a full-mark answer from an average one.

Applications of Sass (style sheet language)

In research: Sass (style sheet language) appears in computer science research whenever the underlying quantities have to be modelled precisely. Papers usually cite it as a starting assumption and then explore where it breaks down.
In technology and industry: Engineering practice reuses Sass (style sheet language) in design rules, simulations and safety margins. Knowing the idea lets you read a specification sheet and understand why the numbers look the way they do.
In the classroom: Sass (style sheet language) is common in secondary-school and first-year university syllabi. It links to neighbouring topics Free computer libraries, Programming languages created in 2006, Ruby (programming language), so understanding it makes those chapters shorter.
In everyday life: Look for Sass (style sheet language) outside the textbook — in sport, cooking, traffic, electronics or the sky above you. An example you found yourself is remembered far longer than one you were given.

Affiliate

Preply — study more efficiently by working with a personal tutor. 50% off.

How to study Sass (style sheet language) in 20 minutes

Read the reference excerpt below once, without taking notes.
Close the page and write down what Sass (style sheet language) means in your own words.
Compare your version with the excerpt and mark what you missed.
Work through the three examples above with pen and paper.
Explain Sass (style sheet language) out loud to somebody else — or to Teacher Smith in the lgStudy chat.

Frequently asked questions

What is Sass (style sheet language) in simple terms?

Why does Sass (style sheet language) matter?

Because it connects several computer science ideas at once: it gives you a definition you can apply, a quantity you can calculate, and a way to check whether a result is plausible.

How should I study Sass (style sheet language)?

Read the excerpt, restate it from memory, then work through the examples and applications listed on this page. The five-step study plan above takes about twenty minutes.

What does this page cover?

It gives you a compact reference excerpt plus original lgStudy explanations, examples, applications and study material on Sass (style sheet language).