Summary  
This chapter explains how to declare and use variables in Sass for storing and reusing style values, making code more maintainable and easy to update.

General domain of usage  
CSS preprocessing in front-end web development

Ensimmäinen hyödyllinen ominaisuus on muuttujien olemassaolo. Arvoja voidaan tallentaa ja käyttää uudelleen koodissa. Tämä muistuttaa ohjelmointikieliä, joissa muuttuja voidaan luoda kerran ja käyttää useita kertoja. Muuttujan määrittämiseksi lisätään dollarimerkki (`$`) ja muuttujan nimi, jonka jälkeen asetetaan kaksoispiste (`:`) ja annetaan arvo.
```css
$textPrimaryColor: #49423c;
```

>Huomio
>
> Voidaan käyttää mitä tahansa nimeämiskäytäntöä, kuten kebab casea (`text-primary-color`), snake casea (`text_primary_color`) tai camel casea (`textPrimaryColor`). Olennaista on käyttää samaa nimeämiskäytäntöä koko projektissa.

Kuvitellaan, että meidän täytyy luoda merkkaus, jossa kaiken tekstin väri on `#474943` ja fonttikoko `24px`. Sass-tiedosto näyttäisi seuraavalta:
```css
$textColor: #474943;
$textFontSize: 24px;

p {
  color: $textColor;
  font-size: $textFontSize;
}
```

Pidämme muuttujat aina mahdollisimman kuvaavina, jotta tiedämme, mistä kukin muuttuja vastaa.

Tämän etuna on, että projektin ulkoasun muutokset on helppo toteuttaa myöhemmin. Jos tekstin fonttikoko tai väri muuttuu, voimme päivittää `$textColor`- ja `$textFontSize`-muuttujien arvot, jolloin projekti päivittyy automaattisesti.

Millä merkillä sass-muuttuja määritellään?

Kehitä tyylittelytaitojasi hallitsemalla edistyneet CSS-tekniikat modernia verkkosuunnittelua varten. Sijoita ja hallitse elementtejä tarkasti käyttämällä kehittyneitä asemointistrategioita. Luo sulavia siirtymiä ja mukaansatempaavia animaatioita parantaaksesi käyttökokemusta. Muunna ja käsittele elementtejä dynaamisten visuaalisten tehosteiden saavuttamiseksi. Rakenna responsiivisia suunnitelmia, jotka mukautuvat eri laitteille, ja tehosta työnkulkuasi CSS-esikäsittelijöillä, kuten Sassilla.

Tutustu, mitä oppijat voivat odottaa tältä edistyneen HTML- ja CSS-tyylittelyn kurssilta. Mitä esitietoja tarvitaan ennen kurssin aloittamista? Mitä aiheita kurssilla käsitellään?

Sijoita ja hallitse elementtejä verkkosivuilla. Tutustu erilaisiin sijoitteluominaisuuksiin, opi käyttämään pinontajärjestystä päällekkäisten elementtien näkyvyyden hallintaan sekä käsittele sisällön ylivuotoa.

Tutki siirtymien tehokkuutta ja opi parantamaan käyttökokemusta. Selvitä, kuinka ominaisuuksia voidaan elävöittää sulavasti ja asteittain, luoden saumattomia tilasiirtymiä.

Opi animaatio-ominaisuudesta ja sen käytöstä dynaamisten ja kiinnostavien suunnittelujen luomisessa. Tutustu monimutkaisten animaatioiden luomiseen avainruutujen avulla sekä animaation hallintaan.

Tutustu transformaatio-ominaisuuteen, jonka avulla voidaan muokata elementtien ulkoasua ja sijaintia verkkosivulla. Opiskele, miten elementtejä skaalataan, kierrätetään, vinotaan ja siirretään kahdessa ja kolmessa ulottuvuudessa. Yhdistä useita transformaatioita monimutkaisempien efektien luomiseksi.

Mukautuvan ja responsiivisen suunnittelun periaatteet ja tekniikat tähtäävät siihen, että verkkosivustot ja sovellukset ovat saavutettavia ja visuaalisesti houkuttelevia eri laitteilla, näytön ko'oilla ja suuntauksilla.

Opi CSS-esiprosessoreista ja siitä, miten ne auttavat kirjoittamaan tehokkaampaa ja helpommin ylläpidettävää koodia. Ymmärrä, kuinka esiprosessoreita käytetään työnkulun yksinkertaistamiseen ja siistimmän CSS-koodin tuottamiseen.

Sass-Muuttujien Käyttö Uudelleenkäytettävissä Tyyleissä

Awesome!

Sass-Muuttujien Käyttö Uudelleenkäytettävissä Tyyleissä