// sample-indented.sass: Sass's original, indented syntax.
// Free sample from 99helpers.com/file-types/scss
// No braces and no semicolons: indentation shows nesting, and each
// declaration ends at the line break. Compile it like SCSS:
//   npx sass sample-indented.sass sample-indented.css

// 1. Modules and variables work exactly as in SCSS
@use "sass:color"

$brand: #046eff
$space: 0.75rem

// 2. A mixin with a parameter (SCSS: @mixin pill($bg) { ... })
@mixin pill($bg)
  display: inline-block
  padding: 0.25rem $space
  border-radius: 999px
  background: $bg

// 3. Nesting by indentation, with & for the parent selector
.tag
  @include pill(color.scale($brand, $lightness: 85%))
  color: $brand

  &:hover
    color: color.scale($brand, $lightness: -25%)

  // 4. A nested media query
  @media (min-width: 600px)
    font-size: 1.125rem