چیت‌شیت Sass و SCSS

1@mixin focus-ring($color: #0f766e) {2  outline: 2px solid $color;3  outline-offset: 3px;4}56.button:focus-visible {7  @include focus-ring;8}

1@mixin media-min($width) {2  @media (min-width: $width) {3    @content;4  }5}67@include media-min(48rem) {8  .layout { display: grid; }9}

1@function spacing($step) {2  @return $step * 0.25rem;3}45.card {6  padding: spacing(4);7}

1.heading {2  font: {3    family: Arial, sans-serif;4    size: 1.5rem;5    weight: 700;6  }7}

1@use "sass:color";23$brand: #0f766e;4$brand-dark: color.adjust($brand, $lightness: -10%);5$brand-soft: color.change($brand, $alpha: 0.2);67.button { background: $brand-dark; }8.badge { color: $brand-soft; }

1@use "sass:color";23$base: #639;4$muted: color.scale($base, $saturation: -25%);5$complement: color.adjust($base, $hue: 180deg);

1@use "sass:color";23$accent: #168aad;4$red-channel: color.channel($accent, "red");5$transparent-accent: color.change($accent, $alpha: 0.35);

1$name: "notice";2$selector: ".#{$name}";34#{$selector} {5  content: quote("ready");6}

1@use "sass:math";23$rounded: math.ceil(3.2);4$half: math.percentage(0.5);5$pixels: 3px;6$unit-name: math.unit($pixels);

1@use "sass:list";23$sizes: 0.5rem, 1rem, 2rem;4$first-size: list.nth($sizes, 1);56@each $size in $sizes {7  .gap-#{$size} { gap: $size; }8}

1@use "sass:map";23$colors: (4  "primary": #0f766e,5  "surface": #f8fafc6);78$primary: map.get($colors, "primary");

1$theme: "dark";23@if $theme == "dark" {4  :root { color-scheme: dark; }5} @else {6  :root { color-scheme: light; }7}89@supports (display: grid) {10  .layout { display: grid; }11}

1@for $index from 1 through 4 {2  .order-#{$index} { order: $index; }3}

1$breakpoints: (2  "tablet": 48rem,3  "desktop": 72rem4);56@each $name, $width in $breakpoints {7  @media (min-width: $width) {8    .show-#{$name} { display: block; }9  }10}

1@mixin columns($count) {2  @if $count < 1 {3    @error "Column count must be positive.";4  }56  grid-template-columns: repeat($count, 1fr);7}