Penggunaan @import dan Partials Sass

Sass dapat mempertahankan kode CSS kering (DRY，Don't Repeat Yourself，jangan mengulang diri sendiri).

Satu cara menulis kode DRY adalah menyimpan kode yang relevan di berkas yang terpisah.

Anda dapat menggunakan bagian CSS untuk membuat berkas kecil, dan mengikutsertakan di berkas Sass lain. Misalnya, berkas seperti ini dapat menjadi: berkas pengatur ulang, variabel, warna, fonta, dll.

Impor berkas Sass

Seperti CSS, Sass juga mendukung @import Instruksi.

@import Instruksi memungkinkan Anda menggabungkan konten berkas satu ke dalam berkas lain.

Karena masalah kinerja, CSS @import Instruksi memiliki kelemahan utama; setiap kali di panggil, akan menciptakan permintaan HTTP ekstra. @import Instruksi akan memasukkan berkas ke dalam CSS; jadi tidak perlu panggilan HTTP ekstra saat menjalankan!

Syntaks masuk Sass:

@import filename;

Petunjuk:Anda tidak perlu menentukan ekstensi berkas, Sass akan otomatis menganggap Anda mengacu pada berkas .sass atau .scss. Anda juga dapat memasukkan berkas CSS.@import Instruksi memasukkan berkas, kemudian dapat digunakan berkas yang diimpor untuk mendefinisikan variabel atau mixin apapun yang ada di berkas yang diimpor.

Anda dapat memasukkan sejumlah berkas apapun ke berkas utama:

Contoh

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

Biarkan kami lihat contoh: asumsikan kita memiliki berkas reset.scss yang mengatur ulang, yang terlihat seperti ini:

Syntaks SCSS (reset.scss):

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

Sekarang kami akan memasukkan berkas "reset.scss" ke dalam berkas lain yang dinamai "standard.scss".

Kami melakukan hal ini: biasanya menambahkan di bagian atas berkas @import Instruksi; sehingga kontennya akan memiliki area pengaruh global:

Syntaks SCSS (standard.scss):

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

Jadi, saat berkas "standard.css" dikonversi, CSS akan seperti berikut ini:

Keluaran CSS：

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

Sass Partials (berkas局部)

Secara default, Sass langsung mengkonversi semua berkas .scss. Namun, saat memasukkan berkas, Anda tidak perlu berkas langsung dikonversi.

Sass memiliki mekanisme: jika Anda memulai nama berkas dengan garis bawah, Sass tidak akan mengkonversi nya. Berkas yang dinamai seperti ini di Sass disebut partials.

Dengan demikian, berkas partial Sass digunakan dengan nama yang dimulai dengan garis bawah:

Sintaks Partial Sass:

_filename;

Contoh di bawah menunjukkan berkas partial Sass bernama "_colors.scss". (Berkas ini tidak akan diubah langsung menjadi "colors.css"):

Contoh

"_colors.scss":

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

Sekarang, jika Anda mengimpor berkas partial ini, silakan lewati garis bawah. pemahaman Sass adalah bahwa ia harus mengimpor berkas "_colors.scss":

Contoh

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