.scss vs .sass

// ===== Same logic, two syntaxes =====
// SCSS (.scss) -- the default, looks like CSS:
@use 'sass:color';

$primary: #2d6cdf;
$radius: 8px;

.button {
  background: $primary;
  border-radius: $radius;
  padding: 0.75rem 1.25rem;
  &:hover { background: color.adjust($primary, $lightness: -8%); }
  &.is-disabled { opacity: 0.5; pointer-events: none; }
}

// Sass (.sass) -- indented, no braces, no semicolons:
@use 'sass:color'

$primary: #2d6cdf
$radius: 8px

.button
  background: $primary
  border-radius: $radius
  padding: 0.75rem 1.25rem
  &:hover
    background: color.adjust($primary, $lightness: -8%)
  &.is-disabled
    opacity: 0.5
    pointer-events: none

// They compile to identical CSS.

// ===== Why SCSS won =====
// 1. CSS is valid SCSS -- paste existing CSS, refactor incrementally
// 2. Editors handle SCSS like CSS (formatting, completion, lint)
// 3. Easier for new teammates: 'it is CSS with extras'
// 4. Sass (indented) breaks on copy/paste from CSS sources

// ===== When you might pick Sass (indented) =====
// - You hate semicolons and braces and your team agrees
// - You inherited a project already on it
// - Otherwise: don't

// ===== Convert between them (one-shot) =====
// SCSS -> Sass:
sass-convert --from scss --to sass src/styles.scss > src/styles.sass

// Sass -> SCSS:
sass-convert --from sass --to scss src/styles.sass > src/styles.scss

// ===== Toolchain note =====
// Dart Sass (current Sass implementation) processes BOTH syntaxes from the same binary.
// Node Sass (libsass) is deprecated; do not start new projects on it.
sass src/styles.scss dist/styles.css      // SCSS
sass src/styles.sass dist/styles.css      // indented Sass

// ===== Mixing in one project (don't, but it works) =====
// SCSS file can @use a Sass file and vice versa; the compiler handles both.
// Keep one syntax per project to reduce cognitive load.

// ===== Patterns to internalise =====
// - Default to SCSS in 2026; it is what new examples, lints, and editors assume
// - The CHOICE is only syntax; features (variables, mixins, @use, math) are identical
// - File extension is the disambiguator: .scss vs .sass

// ===== Pitfalls =====
// - Copy/paste CSS into a .sass file -> instant indentation errors
// - Two syntaxes inside one folder -> tooling confusion
// - Reaching for Node Sass docs in 2026 -> use Dart Sass instead
// - 'SASS' (all caps) refers to the LANGUAGE; the syntax is 'Sass' or 'SCSS'

// .scss — superset of CSS (curly braces, semicolons).
// .sass — indented syntax, no braces. Less common today.