Sass @import och delar

Sass kan hålla CSS-koden torr (DRY，Don't Repeat Yourself，inte upprepa dig själv).

Ett sätt att skriva DRY-kod (Don't Repeat Yourself) är att lagra relaterad kod i separata filer.

Du kan använda CSS-komponenter för att skapa små filer och inkludera dem i andra Sass-filer. Till exempel kan sådana filer vara: reset-filer, variabler, färger, typsnitt osv.

Sass-filimporter

Som CSS stöder också Sass @import Instruktioner.

@import Instruktioner tillåter dig att inkludera innehållet i en fil i en annan fil.

På grund av prestandaproblem @import Instruktioner har en viktig nackdel; varje gång de anropas skapar de ett extra HTTP-anrop. Men, Sass @import Instruktioner inkluderar filer i CSS; så behöver du inte ytterligare HTTP-anrop vid körning!

Sass-importsyntaks:

@import filnamn;

Tips:Du behöver inte specificera filändelsen, Sass antar automatiskt att du menar .sass eller .scss-filer. Du kan också importera CSS-filer.@import Instruktioner för att importera filer, och sedan kan du använda alla variabler eller mixin definierade i den importerade filen i huvudfilen.

Du kan importera så många filer som du vill i huvudfilen:

Exempel

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

Låt oss se på ett exempel: anta att vi har en sådan här reset-fil med namnet "reset.scss":

SCSS-syntaks (reset.scss):

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

Nu ska vi importera "reset.scss"-filen till en annan fil som heter "standard.scss".

Vi gör det så här: vanligtvis lägger vi till @import Instruktioner; på så sätt kommer dess innehåll att ha global effektomfattning:

SCSS-syntaks (standard.scss):

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

Därför kommer CSS att se ut så här när "standard.css"-filen översätts:

CSS-utdata:

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

Sass Partials (lokala filer)

Som standard översätter Sass direkt alla .scss-filer. Men när du importerar filer behöver du inte att filerna översätts direkt.

Sass har ett mekanism: om du börjar filnamnet med en understreck, kommer Sass inte att översätta det. Filer som är namngivna på detta sätt kallas partials i Sass.

Därför används förledande understrecket i namnet på en partial Sass-fil:

Sass Partial Syntax:

_filnamn;

Exempel visar en delad Sass-fil med namnet "_colors.scss". (Denna fil kommer inte att konverteras direkt till "colors.css"):

Exempel

"_colors.scss":

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

Nu, om du importerar denna delningsfil, bör du inte använda understrecket. Sass förstår att den bör importera filen "_colors.scss":

Exempel

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