Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Sass-Tiedostojen Organisointi Skaalautuvia Projekteja Varten | CSS-Esiprosessorit ja Sass
Edistyneet CSS-tekniikat

bookSass-Tiedostojen Organisointi Skaalautuvia Projekteja Varten

Joskus kaiken koodin kirjoittaminen yhteen tiedostoon on haastavaa. Sass mahdollistaa koodin jakamisen eri tiedostoihin ja kansioihin. Tämä helpottaa ylläpitoa ja koodin uudelleenjärjestelyä.

sass-kansio

Ensimmäinen tehtävä on luoda sass-kansio projektin juureen. Näin ilmoitetaan kääntäjälle, että projektissa käytetään sassia.

sass-kansiorakenne

sass-kansiossa:

  1. Luodaan main.scss -tiedosto. Tämä on pääasiallinen tiedosto kääntäjälle. Kaikki osat liitetään tähän tiedostoon @import-direktiivin avulla;
  2. Luodaan eri kansiot sass-osatiedostoille. (Esimerkiksi utilities-kansio muuttujille, components-kansio toistuville tyyleille tietyille elementeille, base-kansio globaaleille tyyleille ja oletuselementtien käyttäytymisen nollaamiselle sekä layouts-kansio ei-toistuville tyyleille).

osatiedostot

Nyt voimme lisätä tiedostoja ja kirjoittaa sass-koodia tyylien määrittämiseksi elementeille. Rakenne pysyy selkeänä, kun luodaan yksi tiedosto jokaista ominaisuutta varten. Tiedostonimen tulee alkaa alaviivalla (_). Kääntäjälle tämä tarkoittaa, ettei kyseessä ole pääasiallinen tiedosto, vaan osatiedosto.

Koko rakenne on valmis. Kaikki tiedostot voidaan tuoda main.scss-tiedostoon @import-direktiivin avulla. Tiedostojen tuontijärjestys on tärkeä. Esimerkiksi, jos halutaan käyttää muuttujia _variables.scss-tiedostosta _button.scss-tiedostossa, täytyy _variables.scss-tiedoston tuonti olla ylempänä kuin _button.scss-tiedoston tuonti main.scss-tiedostossa.

Tiedoston tuonnin syntaksi on seuraava. Käytetään @import-komentoa ja lainausmerkkejä ("") tiedostopolun määrittämiseen.

@import "path";

main.scss-tiedoston lopullinen sisältö näyttää tältä:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Huomio

Olemme käsitelleet sass-esikäsittelijän perusteet, jotka mahdollistavat sen käytön projekteissa. Kuitenkin jokaisella esikäsittelijällä on laaja valikoima erilaisia ominaisuuksia. Kaikkien niiden kattaminen ei kuulu tämän kurssin aihepiiriin.

question mark

Mikä on suositeltu sijainti tiedostojen tallentamiseen "sass"-kansioon?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 7

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you explain what a Sass partial is and why the filename starts with an underscore?

How does the folder structure help in organizing large Sass projects?

Can you show an example of how to use variables from one partial in another?

Awesome!

Completion rate improved to 2.04

bookSass-Tiedostojen Organisointi Skaalautuvia Projekteja Varten

Pyyhkäise näyttääksesi valikon

Joskus kaiken koodin kirjoittaminen yhteen tiedostoon on haastavaa. Sass mahdollistaa koodin jakamisen eri tiedostoihin ja kansioihin. Tämä helpottaa ylläpitoa ja koodin uudelleenjärjestelyä.

sass-kansio

Ensimmäinen tehtävä on luoda sass-kansio projektin juureen. Näin ilmoitetaan kääntäjälle, että projektissa käytetään sassia.

sass-kansiorakenne

sass-kansiossa:

  1. Luodaan main.scss -tiedosto. Tämä on pääasiallinen tiedosto kääntäjälle. Kaikki osat liitetään tähän tiedostoon @import-direktiivin avulla;
  2. Luodaan eri kansiot sass-osatiedostoille. (Esimerkiksi utilities-kansio muuttujille, components-kansio toistuville tyyleille tietyille elementeille, base-kansio globaaleille tyyleille ja oletuselementtien käyttäytymisen nollaamiselle sekä layouts-kansio ei-toistuville tyyleille).

osatiedostot

Nyt voimme lisätä tiedostoja ja kirjoittaa sass-koodia tyylien määrittämiseksi elementeille. Rakenne pysyy selkeänä, kun luodaan yksi tiedosto jokaista ominaisuutta varten. Tiedostonimen tulee alkaa alaviivalla (_). Kääntäjälle tämä tarkoittaa, ettei kyseessä ole pääasiallinen tiedosto, vaan osatiedosto.

Koko rakenne on valmis. Kaikki tiedostot voidaan tuoda main.scss-tiedostoon @import-direktiivin avulla. Tiedostojen tuontijärjestys on tärkeä. Esimerkiksi, jos halutaan käyttää muuttujia _variables.scss-tiedostosta _button.scss-tiedostossa, täytyy _variables.scss-tiedoston tuonti olla ylempänä kuin _button.scss-tiedoston tuonti main.scss-tiedostossa.

Tiedoston tuonnin syntaksi on seuraava. Käytetään @import-komentoa ja lainausmerkkejä ("") tiedostopolun määrittämiseen.

@import "path";

main.scss-tiedoston lopullinen sisältö näyttää tältä:

@import "utilities/variables";
@import "base/resetting";
@import "components/button";
@import "components/link";
@import "layouts/about-section";
@import "layouts/contacts-section";

Huomio

Olemme käsitelleet sass-esikäsittelijän perusteet, jotka mahdollistavat sen käytön projekteissa. Kuitenkin jokaisella esikäsittelijällä on laaja valikoima erilaisia ominaisuuksia. Kaikkien niiden kattaminen ei kuulu tämän kurssin aihepiiriin.

question mark

Mikä on suositeltu sijainti tiedostojen tallentamiseen "sass"-kansioon?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 7
some-alt