Sass @import ja osat

Sass pitää CSS-koodin kuivana (DRY，Don't Repeat Yourself，ei toisteta itseään).

Yksi DRY-koodin kirjoittamisen tavoista on tallentaa liittyvät koodit erillisiin tiedostoihin.

Voit käyttää CSS-osa-ohjelmia luodaksesi pieniä tiedostoja, jotka voidaan sisällyttää muihin Sass-tiedostoihin. Esimerkiksi tällaiset tiedostot voivat olla: resetitiedostot, muuttujat, värit, fontit jne.

Sass-tiedostojen tuontia

Kuten CSS:ssä, Sass tukee myös @import ohje.

@import ohje sallii tiedoston sisällön sisällyttämisen toiseen tiedostoon.

CSS ohjeen suorituskykyongeluiden vuoksi @import ohjeella on merkittävä haittapuoli; jokaisen kutsun yhteydessä luodaan ylimääräinen HTTP-pyyntö. Mutta Sass @import ohje sisällyttää tiedoston CSS:iin; siksi ei tarvita lisä HTTP-pyynnöitä suoritusvaiheessa!

Sass-tuontikieli:

@import tiedostonnimi;

Vinkki:Et tarvitse määritellä tiedostopäätettä, Sass olettaa automaattisesti, että viittaat .sass- tai .scss-tiedostoon. Voit myös tuoda CSS-tiedostoja.@import ohje tuoda tiedostoja, ja voit käyttää päätiedostossa minkä tahansa tuodun tiedoston määrittämiä muuttujia tai mixin-yhdistelmiä.

Voit tuoda mihin tahansa päätiedostoon minkä määrän tiedostoja:

Esimerkki

@import "variables";
@import "colors";
@import "reset";

Katsotaan esimerkkiä: oletetaan, että meillä on nimeltään "reset.scss" reset-tiedosto, joka näyttää tältä:

SCSS-kieli (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Nyt tuomme "reset.scss"-tiedoston toiseen nimeltä "standard.scss" tiedostoon.

Tämä on tapa, että yleensä lisätään tiedoston ylätunnisteeseen: @import ohje; näin sen sisältö on globaali:

SCSS-kieli (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sen vuoksi, kun "standard.css"-tiedosto kääntyy, CSS näyttää tältä:

CSS-lähtö:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (lokaalitiedostot)

Oletuksena Sass kääntää suoraan kaikki .scss-tiedostot. Kun tuodaan tiedostoja, ei tarvitse, että ne kääntyvät suoraan.

Sassilla on mekanismi: jos tiedoston nimi alkaa alaviivalla, Sass ei käännetä sitä. Tällaiset nimetetyt tiedostot kutsutaan Sassissa osiksi.

Siksi osa Sass-tiedostot nimeetään alaviivalla johtavilla:

Sass osan syntaksi:

_filename;

Esimerkki näyttää nimeltä "_colors.scss" osan Sass-tiedoston (tämä tiedosto ei muuteta suoraan "colors.css":)

Esimerkki

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Nyt, jos tuot osan tiedoston, jätä alaviiva pois. Sassin ymmärrys on, että se tulisi tuoda tiedoston "_colors.scss":

Esimerkki

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}