Usamos cookies para mejorar tu experiencia en el sitio
Política de Privacidad
Aceptar
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:
- Użyj SASS do zdefiniowania bazowych kolorów i wygenerowania wariantów
- Stwórz CSS Custom Properties dla motywu jasnego i ciemnego
- Dodaj przycisk przełączający motywy przez JavaScript
- 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!