Az Angular alkalmazások építése során a CSS változók (CSS variables vagy custom properties) és az SCSS változók kombinálásának több előnye is van. Az alábbiakban bemutatom a főbb előnyöket:
1. Dinamikus Stílusok
A CSS változók lehetővé teszik, hogy a stílusokat dinamikusan változtasd JavaScript kóddal, mivel a CSS változók a futási időben is módosíthatók. Ezzel szemben az SCSS változók csak az előfeldolgozás során használhatók, így azok nem módosíthatók a futási időben.
2. Jobb Teljesítmény és Kevesebb Újrarenderelés
A CSS változók használata csökkentheti a DOM újrarenderelését, mivel a stílusok módosítása során nem kell az egész stíluslapot újrafordítani. Ezzel javítható az alkalmazás teljesítménye, különösen nagyobb projektek esetén.
3. Téma Váltás és Egyéb Runtime Módosítások
A CSS változók egyszerűen használhatók téma váltásra vagy egyéb runtime módosításokra. Például, ha egy alkalmazás különböző témákat (világos és sötét mód) támogat, akkor a CSS változókat egyszerűen módosíthatod a JavaScript segítségével, anélkül hogy újra kellene fordítani az SCSS-t.
4. Könnyebb Karbantartás és Moduláris Kód
Az SCSS változókat használhatod a fejlesztés során a kód modularitásának növelésére és a kód olvashatóságának javítására, míg a CSS változók a véglegesített stíluslapban segíthetnek a stílusok dinamikus módosításában. Ezáltal az SCSS változókat használhatod a fejlesztés során a színekkel, méretekkel és egyéb stílusokkal való munka során, majd ezek értékeit exportálhatod CSS változókként, amelyeket a futási időben is módosíthatsz.
5. Összetett Stílusok Kezelése
A CSS változókat kombinálhatod más CSS változókkal, hogy összetett stílusokat hozz létre. Ez különösen hasznos lehet, ha több komponens közötti konzisztenciát kell biztosítani, mivel a CSS változókat örökölhetik az alkomponensek.
Példa Kód
Az általad megadott példa jól illusztrálja ezt a kombinált megközelítést:
// variables.scss
$color-primary: tomato;
$color-secondary: orange;
// var-exports.scss
@use "./variables" as var;
@mixin export-vars() {
--color-primary: #{var.$color-primary};
--color-secondary: #{var.$color-secondary};
}
// main.scss
@import "abstracts/var-exports";
body {
@include export-vars;
}Használat
- Fejlesztés során: Az SCSS változókat használhatod a színek, méretek és egyéb stílusok meghatározására, amelyek könnyen módosíthatók és karbantarthatók.
- Build során: Az SCSS változókat átkonvertálhatod CSS változókká, amelyeket a végleges CSS fájlokban használsz.
- Futási időben: A CSS változókat módosíthatod JavaScript segítségével, hogy dinamikusan változtasd a stílusokat anélkül, hogy újra kellene fordítani a teljes stíluslapot.
Ez a kombinált megközelítés lehetővé teszi, hogy a fejlesztési és futási időben is kihasználd mindkét változó típus előnyeit, ezáltal rugalmasabbá és hatékonyabbá téve az Angular alkalmazás stílusainak kezelését.
