Sass @import og Partials

Sass kan holde CSS-koden tør (DRY，Don't Repeat Yourself，gentag ikke dig selv）.

En måde at skrive DRY-kode på er at gemme relateret kode i separate filer.

Du kan bruge CSS-klip til at oprette små filer, som kan inkluderes i andre Sass-filer. For eksempel kan disse filer være: nulstillede filer, variabler, farver, skrifttyper osv.

Sass-filimport

Som CSS understøtter Sass også @import Instruktioner.

@import Instruktioner giver dig mulighed for at inkludere indholdet af en fil i en anden fil.

Pga. ydeevneproblemer, CSS @import Instruktioner har en stor ulempe; hver gang de kaldes, oprettes der en ekstra HTTP-anmodning. Men Sass @import Instruktioner inkluderer filer i CSS; så der er ingen behov for ekstra HTTP-anmodninger ved kørsel!

Sass-import语法:

@import filnavn;

Tip:Du behøver ikke at specificere filudvidelsen, Sass antager automatisk, at du refererer til .sass- eller .scss-filer. Du kan også importere CSS-filer.@import Instruktioner til at importere filer, derefter kan du bruge alle variabler eller mixin defineret i den importerede fil i hovedfilen.

Du kan importere et hvilket som helst antal filer i hovedfilen:

Eksempel

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

Lad os se et eksempel: antag, at vi har en fil kaldet "reset.scss", som ser sådan ud:

SCSS-sprog (reset.scss):

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

Nu skal vi importere "reset.scss"-filen til en anden fil kaldet "standard.scss".

Vi gør det sådan: generelt tilføjer vi @import Instruktioner; så indholdet vil have en global rækkevidde:

SCSS-sprog (standard.scss):

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

Derfor vil CSS se sådan ud, når "standard.css"-filen oversættes:

CSS-udskrift:

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

Sass Partials (lokale filer)

Standardmæssigt oversætter Sass direkte alle .scss-filer. Men når det gælder import af filer, behøver du ikke, at filerne oversættes direkte.

Sass har en mekanisme: hvis du starter filnavnet med en understregning, vil Sass ikke oversætte det. Filnavne, der er navngivet på denne måde, kaldes partials i Sass.

Derfor bruger delvise Sass-filer forudgående understregning i navngivningen:

Sass Partial syntaks:

_filnavn;

Følgende eksempel viser en delvis Sass-fil med navnet "_colors.scss". (Denne fil konverteres ikke direkte til "colors.css"):

Eksempel

"_colors.scss":

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

Nu, hvis du importerer denne delvis fil, skal du undgå understregningen. Sass forstår, at den skal importere filen "_colors.scss":

Eksempel

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