Sass @import και Partials

Sass can keep CSS code dry (DRYDon't Repeat Yourself, do not repeat yourself).

One way to write DRY code is to store related code in separate files.

You can use CSS snippets to create small files and include them in other Sass files. For example, such files can be: reset files, variables, colors, fonts, etc.

Sass File Imports

Like CSS, Sass also supports @import Directives.

@import Directives allow you to include the content of one file in another file.

Due to performance issues, CSS @import Directives have a major drawback; each time it is called, it creates an additional HTTP request. However, Sass @import Directives include files in CSS; so there is no need for additional HTTP calls at runtime!

Sass Import Syntax:

@import filename;

Tip:You do not need to specify the file extension, Sass will automatically assume you are referring to a .sass or .scss file. You can also import CSS files.@import Directives import files, and then you can use any variables or mixins defined in the imported files in the main file.

You can import any number of files in the main file:

Παράδειγμα

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

Let's look at an example: suppose we have a reset file named "reset.scss" that looks like this:

SCSS Syntax (reset.scss):

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

Now we want to import the "reset.scss" file into another file named "standard.scss".

We do this: generally at the top of the file @import Directives; so its content will have a global scope:

SCSS Syntax (standard.scss):

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

Therefore, when the "standard.css" file is translated, the CSS will be as follows:

CSS Output:

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

Sass Partials (partial files)

By default, Sass directly translates all .scss files. However, when importing files, you do not need the files to be directly translated.

Το Sass έχει ένα μηχανισμό: αν ξεκινάτε το όνομα αρχείου με υπογράμμωση, το Sass δεν θα το μεταφράσει. Αυτά τα αρχεία ονομάζονται partials στο Sass.

Επομένως, τα αρχεία partial Sass χρησιμοποιούν ονομασία με προπορευόμενο υπογράμμωση:

Γλώσσα Παράλληλου Sass:

_ονομασία αρχείου;

Το παρακάτω παράδειγμα δείχνει το αρχείο partial Sass με το όνομα "_colors.scss". (Αυτό το αρχείο δεν θα μετατραπεί άμεσα σε "colors.css"):

Παράδειγμα

"_colors.scss":

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

Τώρα, αν εισάγετε το αρχείο partial, παραλείψτε τα υπογράμμωση. Η κατανόηση του Sass είναι ότι πρέπει να εισάγετε το αρχείο "_colors.scss":

Παράδειγμα

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  χρώμα: $myBlue;
}