Penggunaan @import dan Partials Sass

Sass boleh mempertahankan kod CSS kering (DRY，Don't Repeat Yourself，jangan diulang diri sendiri).

Satu cara untuk menulis kod DRY adalah menyimpan kod yang berkaitan di dalam berkas yang diasingkan.

Anda boleh menggunakan bagian CSS untuk mencipta berkas kecil, dan mengikutsertakannya di dalam berkas Sass lain. Contohnya, berkas seperti berikut boleh menjadi: berkas pengaturan, variabel, warna, huruf, dan sebagainya.

Pengimpor berkas Sass

Seperti CSS, Sass juga mendukung @import Perintah.

@import Perintah membenarkan anda mengikutsertakan kandungan berkas satu di dalam berkas lain.

Karena masalah keperluan, CSS @import Perintah mempunyai kelemahan utama; setiap kali ia dipanggil, ia akan mencipta permintaan HTTP tambahan. @import Perintah akan mengikutsertakan berkas di dalam CSS; jadi, tiada panggilan HTTP tambahan diperlukan di masa pengoperasian!

Syarat mengimpor Sass:

@import nama_berkas;

Pesan:Anda tidak perlu menentukan ekstensi berkas, Sass akan secara automatik menganggap anda maksudkan .sass atau .scss berkas. Anda juga boleh mengimpor berkas CSS.@import Perintah mengimpor berkas, kemudian anda boleh gunakan mana-mana variabel atau mixin yang didefinikan di dalam berkas yang diimpor di dalam berkas utama.

Anda boleh mengimpor sebarang bilangan berkas di dalam berkas utama:

Contoh

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

Berikut adalah contoh: asumsikan kami memiliki berkas "reset.scss" yang dijadikan berkas pengaturan, yang kelihatan seperti berikut:

Syarat SCSS (reset.scss):

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

Sekarang kami akan mengimpor berkas "reset.scss" ke dalam berkas lain yang dinamakan "standard.scss".

Kami melakukan demikian: biasanya di atas berkas. @import Perintah; demikian isinya akan mempunyai keberkuasaan global:

Syarat SCSS (standard.scss):

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

Oleh kerana, ketika berkas "standard.css" dijalankan terjemahan, CSS akan seperti berikut:

Output CSS：

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

Sass Partials (berkas局部)

Dalam keadaan lalai, Sass secara langsung terjemahkan semua berkas .scss. Tetapi, dalam mengimpor berkas, anda tidak perlu berkasnya dijalankan terjemahan langsung.

Sass mempunyai mekanisme: jika Anda memulakan nama fail dengan garis bawah, Sass akan menghindari pengubahan suai. Fail yang dinamai dengan cara ini di Sass disebut partials.

Oleh itu, fail partial Sass digunakan untuk nama pengawal garis bawah:

Gramatika Sass Partial:

_filename;

Contoh di bawah menunjukkan fail partial Sass yang dinamakan "_colors.scss". (Fail ini tidak akan diubah suai ke "colors.css"):

Contoh

"_colors.scss":

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

Sekarang, jika Anda mengimpor fail partial ini, sila buang garis bawah. Perkataan Sass adalah ia harus mengimpor fail "_colors.scss":

Contoh

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