String types and concatenation in SASS - Browser Rendering Trace

Render Flow - String types and concatenation

Read SASS file

↓

Parse variables and strings

↓

Identify string types (quoted/unquoted)

↓

Process concatenation operators

↓

Compile to CSS string values

↓

Output final CSS

The SASS compiler reads the file, parses string variables and concatenation, then compiles them into CSS strings for the browser.

Render Steps - 4 Steps

Code Added:$greeting: "Hello";

Before

[content element]
(no generated content)

→

After

[content element]
(no visible change yet)

Declared a quoted string variable $greeting with value "Hello". No visual change yet because it's just a variable.

🔧 Browser Action:Stores variable in SASS memory; no CSS output yet.

Code Sample

This SASS code creates a CSS rule that shows the concatenated string "Hello World!" after elements with class 'content'.

SASS

/* No HTML needed for this SASS example */

SASS

$greeting: "Hello";
$name: 'World';
$message: $greeting + ' ' + $name + '!';

.content::after {
  content: $message;
}

Render Quiz - 3 Questions

After step 4, what text appears visually after elements with class 'content'?

A "Hello World!"

B HelloWorld!

C "HelloWorld!"

D No text appears

Common Confusions - 2 Topics

Why doesn't unquoted string show up as text in CSS content?

Unquoted strings in SASS are treated as identifiers, not text. To show text in CSS content, strings must be quoted so the browser renders them as text.

💡 Always quote strings when using them for visible text in CSS content.

Why does concatenation with + work but without spaces it looks wrong?

Concatenation joins strings exactly as written. If you don't add spaces explicitly (like ' '), words will stick together without space.

💡 Add explicit spaces as separate strings when concatenating text.

Property Reference

SASS Feature	Example	Description	Visual Effect
Quoted String	"Hello" or 'World'	Strings enclosed in quotes, treated as literal text	Used as text in CSS, e.g., content property
Unquoted String	HelloWorld	Strings without quotes, treated as identifiers or keywords	May not render as text unless quoted in CSS
Concatenation Operator	$a + $b	Joins two strings or variables into one string	Creates combined text for CSS output
Content Property	content: $message;	CSS property to insert text or symbols in pseudo-elements	Displays text visually in browser

Concept Snapshot

SASS strings can be quoted or unquoted. Quoted strings show as literal text in CSS. Use + to join strings, add spaces explicitly. Use content property to display text in pseudo-elements. Always quote strings for visible text output.