Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK
CodeWorlds

SASS vs CSS Custom Properties - kiedy używać czego?

Witaj @name w kolejnej komnacie egipskiej mądrości! Jestem Mohamet i dzisiaj odkryjemy przed Tobą jeden z najważniejszych sekretów współczesnego CSS - różnicę między zmiennymi SASS a natywnym CSS Custom Properties (nazywane też CSS Variables).

Podobnie jak starożytni Egipcjanie mieli różne narzędzia do różnych celów - jedne do budowy piramid, inne do rysowania hieroglifów - tak i my mamy różne narzędzia do zarządzania wartościami w CSS. Poznajmy je!

SASS Variables - kompilacja w czasie budowy

Zmienne SASS są przetwarzane w czasie kompilacji. Oznacza to, że zanim Twój kod trafi do przeglądarki, SASS zamienia wszystkie zmienne na konkretne wartości.

1// SASS variables - compile time
2$primary-color: #3498db;
3$spacing-unit: 8px;
4$font-stack: 'Roboto', sans-serif;
5
6.button {
7  background: $primary-color;
8  padding: $spacing-unit * 2;
9  font-family: $font-stack;
10}

Po skompilowaniu do CSS:

1.button {
2  background: #3498db;
3  padding: 16px;
4  font-family: 'Roboto', sans-serif;
5}

Jak widzisz, zmienne SASS znikają w finalnym CSS - zostają tylko konkretne wartości. To jak hieroglify, które po przetłumaczeniu stają się zwykłym tekstem.

CSS Custom Properties - dynamiczne w czasie rzeczywistym

CSS Custom Properties działają w przeglądarce w czasie rzeczywistym. Są prawdziwymi zmiennymi CSS, które można zmieniać dynamicznie!

1/* CSS Custom Properties - runtime, dynamic! */
2:root {
3  --primary-color: #3498db;
4  --spacing-unit: 8px;
5  --font-stack: 'Roboto', sans-serif;
6}
7
8.button {
9  background: var(--primary-color);
10  padding: calc(var(--spacing-unit) * 2);
11  font-family: var(--font-stack);
12}

Różnica: Te zmienne pozostają w finalnym CSS i można je zmieniać dynamicznie przez JavaScript!

1// Możesz zmieniać CSS Custom Properties w czasie rzeczywistym!
2document.documentElement.style.setProperty('--primary-color', '#e74c3c');
3
4// SASS variables NIE MOGĄ być zmieniane w runtime - są już skompilowane!

Kluczowe różnice

1. Zasięg (Scope)

SASS Variables:

1$global-color: blue;
2
3.foo {
4  $local-color: green;
5  color: $local-color; // działa
6}
7
8.bar {
9  color: $local-color; // BŁĄD! Zmienna niedostępna
10}

CSS Custom Properties:

1:root {
2  --global-color: blue;
3}
4
5.foo {
6  --local-color: green;
7  color: var(--local-color); /* działa */
8}
9
10.bar {
11  color: var(--local-color); /* fallback do wartości domyślnej lub dziedziczenie */
12}

CSS Custom Properties dziedziczą się w dół drzewa DOM - podobnie jak kolor czy czcionka!

2. Obliczenia matematyczne

SASS Variables:

1$base-size: 16px;
2$large-size: $base-size * 2; // 32px - obliczone podczas kompilacji
3
4.element {
5  font-size: $large-size; // wynik: font-size: 32px;
6}

CSS Custom Properties:

1:root {
2  --base-size: 16px;
3}
4
5.element {
6  /* Musisz użyć calc() */
7  font-size: calc(var(--base-size) * 2);
8}

3. Dynamiczne zmiany

SASS Variables - brak wsparcia dla dynamicznych zmian:

1// To NIE ZADZIAŁA w runtime!
2$theme-color: #3498db;
3
4.theme-light {
5  $theme-color: #ecf0f1; // To się nie zmieni po załadowaniu strony
6}

CSS Custom Properties - pełna dynamika:

1:root {
2  --theme-color: #3498db;
3  --background: #ffffff;
4  --text: #000000;
5}
6
7/* Ciemny motyw - po prostu nadpisz zmienne! */
8[data-theme="dark"] {
9  --theme-color: #e74c3c;
10  --background: #2c3e50;
11  --text: #ecf0f1;
12}
13
14.page {
15  background: var(--background);
16  color: var(--text);
17}

Możesz przełączać motywy jedną linią JavaScriptu:

1document.body.setAttribute('data-theme', 'dark');

Praktyczne przykłady - kiedy używać czego?

Użyj SASS Variables gdy:

1. Potrzebujesz mixinów i funkcji

1$primary-color: #3498db;
2
3@mixin button-variant($color) {
4  background: $color;
5  border-color: darken($color, 10%);
6
7  &:hover {
8    background: darken($color, 15%);
9  }
10}
11
12.btn-primary {
13  @include button-variant($primary-color);
14}

2. Wykonujesz złożone obliczenia

1$grid-columns: 12;
2$grid-gutter: 30px;
3
4@for $i from 1 through $grid-columns {
5  .col-#{$i} {
6    width: percentage($i / $grid-columns);
7  }
8}

3. Potrzebujesz zagnieżdżania i organizacji kodu

1$breakpoint-tablet: 768px;
2
3.header {
4  padding: 20px;
5
6  @media (min-width: $breakpoint-tablet) {
7    padding: 40px;
8  }
9
10  .nav {
11    display: flex;
12
13    &__item {
14      margin: 0 10px;
15    }
16  }
17}

Użyj CSS Custom Properties gdy:

1. Potrzebujesz dynamicznych zmian

1:root {
2  --primary-hue: 210;
3  --primary-saturation: 70%;
4  --primary-lightness: 50%;
5}
6
7.button {
8  background: hsl(
9    var(--primary-hue),
10    var(--primary-saturation),
11    var(--primary-lightness)
12  );
13}
14
15/* Zmień odcień dynamicznie w JS */
1const slider = document.querySelector('#hue-slider');
2slider.addEventListener('input', (e) => {
3  document.documentElement.style.setProperty('--primary-hue', e.target.value);
4});

2. Tworzysz system motywów

1/* Jasny motyw */
2:root {
3  --bg-primary: #ffffff;
4  --bg-secondary: #f8f9fa;
5  --text-primary: #212529;
6  --text-secondary: #6c757d;
7  --border-color: #dee2e6;
8}
9
10/* Ciemny motyw */
11[data-theme="dark"] {
12  --bg-primary: #212529;
13  --bg-secondary: #343a40;
14  --text-primary: #f8f9fa;
15  --text-secondary: #adb5bd;
16  --border-color: #495057;
17}
18
19/* Komponenty używają tych samych zmiennych */
20.card {
21  background: var(--bg-primary);
22  color: var(--text-primary);
23  border: 1px solid var(--border-color);
24}

3. Potrzebujesz dziedziczenia wartości w komponentach

1.card {
2  --card-padding: 1rem;
3  --card-bg: white;
4
5  padding: var(--card-padding);
6  background: var(--card-bg);
7}
8
9.card--large {
10  --card-padding: 2rem; /* Nadpisz tylko padding */
11}
12
13.card--dark {
14  --card-bg: #2c3e50; /* Nadpisz tylko background */
15}

Najlepsze rozwiązanie: Używaj obu!

Podobnie jak starożytni Egipcjanie używali różnych narzędzi do budowy swoich cudów architektury, ty również powinieneś łączyć moc SASS i CSS Custom Properties!

Strategia hybrydowa:

1// _variables.scss - SASS variables dla konfiguracji projektu
2$color-blue-500: #3498db;
3$color-red-500: #e74c3c;
4$spacing-base: 8px;
5
6// Generuj CSS Custom Properties z SASS variables
7:root {
8  // Kolory
9  --color-primary: #{$color-blue-500};
10  --color-danger: #{$color-red-500};
11
12  // Spacing
13  --spacing-xs: #{$spacing-base * 0.5};
14  --spacing-sm: #{$spacing-base};
15  --spacing-md: #{$spacing-base * 2};
16  --spacing-lg: #{$spacing-base * 3};
17}
18
19// Użyj SASS do generowania wariantów
20@mixin generate-spacing-utilities {
21  @each $size, $value in (
22    'xs': var(--spacing-xs),
23    'sm': var(--spacing-sm),
24    'md': var(--spacing-md),
25    'lg': var(--spacing-lg)
26  ) {
27    .p-#{$size} {
28      padding: #{$value};
29    }
30    .m-#{$size} {
31      margin: #{$value};
32    }
33  }
34}
35
36@include generate-spacing-utilities;

Praktyczny przykład - responsywny system typografii:

1// SASS - konfiguracja i breakpointy
2$breakpoint-sm: 576px;
3$breakpoint-md: 768px;
4$breakpoint-lg: 992px;
5
6:root {
7  // Bazowy rozmiar czcionki - może być zmieniany przez user preferences
8  --font-size-base: 16px;
9
10  // Skala typograficzna
11  --font-size-xs: 0.75rem;
12  --font-size-sm: 0.875rem;
13  --font-size-md: 1rem;
14  --font-size-lg: 1.125rem;
15  --font-size-xl: 1.25rem;
16  --font-size-2xl: 1.5rem;
17  --font-size-3xl: 2rem;
18}
19
20// SASS mixin dla responsive typography
21@mixin responsive-font-size($min, $max, $min-vw: $breakpoint-sm, $max-vw: $breakpoint-lg) {
22  font-size: $min;
23
24  @media (min-width: $min-vw) {
25    font-size: calc(#{$min} + (#{$max} - #{$min}) * ((100vw - #{$min-vw}) / (#{$max-vw} - #{$min-vw})));
26  }
27
28  @media (min-width: $max-vw) {
29    font-size: $max;
30  }
31}
32
33.heading {
34  @include responsive-font-size(var(--font-size-xl), var(--font-size-3xl));
35}

Możesz teraz zmienić rozmiar czcionki dla użytkowników z preferencjami dostępności:

1// Użytkownik wybiera większe czcionki
2document.documentElement.style.setProperty('--font-size-base', '20px');

Podsumowanie - złote zasady

Używaj SASS Variables dla:

  • Konfiguracji projektu (kolory bazowe, breakpointy, wartości stałe)
  • Mixinów i funkcji (reużywalny kod, obliczenia)
  • Organizacji kodu (partials, zagnieżdżanie, @extend)
  • Kompilacji (generowanie klas utility, pętle @for/@each)

Używaj CSS Custom Properties dla:

  • Dynamicznych zmian (motywy, user preferences)
  • Dziedziczenia kontekstowego (komponenty, nested values)
  • JavaScript interakcji (animacje, interaktywne elementy)
  • Runtime calculations (responsive values, fluid typography)

Hybryda (najlepsze podejście):

1// Konfiguracja w SASS
2$colors: (
3  'blue': #3498db,
4  'red': #e74c3c,
5  'green': #27ae60
6);
7
8// Generuj CSS Custom Properties
9:root {
10  @each $name, $color in $colors {
11    --color-#{$name}: #{$color};
12    --color-#{$name}-light: #{lighten($color, 10%)};
13    --color-#{$name}-dark: #{darken($color, 10%)};
14  }
15}
16
17// Użyj w komponentach
18.button {
19  background: var(--color-blue);
20
21  &:hover {
22    background: var(--color-blue-dark);
23  }
24}
25
26// W JavaScript możesz dynamicznie zmieniać
27document.documentElement.style.setProperty('--color-blue', '#2ecc71');

Zadanie praktyczne

Stwórz system motywów, który łączy SASS i CSS Custom Properties:

  1. Użyj SASS do zdefiniowania bazowych kolorów i wygenerowania wariantów
  2. Stwórz CSS Custom Properties dla motywu jasnego i ciemnego
  3. Dodaj przycisk przełączający motywy przez JavaScript
  4. Wykorzystaj SASS mixiny do tworzenia komponentów używających CSS variables

Podobnie jak faraonowie łączyli różne materiały do budowy swoich monumentów, tak i Ty połącz moc SASS i CSS Custom Properties, aby stworzyć potężny, elastyczny i łatwy w utrzymaniu system stylów!

Powodzenia, młody budowniczy hieroglifów CSS!

Przejdź do CodeWorlds→