Apakah kegunaan fungsi SASS @import?

SASS ialah prapemproses CSS yang memastikan kod CSS kering dengan tidak membenarkan penduaan dalam kod. Terdapat pelbagai arahan yang tersedia dalam SASS, salah satunya ialah arahan @import.

Arahan ‘@import’ digunakan untuk mengimport kod satu fail ‘.scss’ atau ‘.sass’ ke dalam fail lain dan melaksanakannya semasa penyusunan. Kita boleh mengimport pembolehubah, fungsi, campuran, dsb. daripada satu fail ke fail lain menggunakan arahan "@import".

tatabahasa

Pengguna boleh menggunakan arahan '@import' dalam SASS untuk mengimport fail mengikut sintaks berikut.

@import 'test'

Kami mengimport fail 'test.scss' atau 'test.sass' dalam sintaks di atas. Di sini, kami tidak perlu menentukan sambungan fail semasa mengimport kod, pengkompil akan mengesannya secara automatik.

Jika pengguna ingin mengimport berbilang fail CSS dalam satu fail, sintaks berikut harus digunakan.

@import 'file1', 'file2', 'file3', 'file4', ...

Sekarang, mari belajar cara mengimport fail menggunakan arahan @import dengan contoh.

Contoh 1

Contoh 1

Dalam contoh di bawah, kami telah menambah beberapa pembolehubah dalam fail "font.scss". Selepas itu, kami menggunakan arahan "@import" untuk mengimport kandungan fail "fonts.scss" ke dalam fail "styles.scss".

Dalam fail "style.scss", kami menggunakan pembolehubah fail "font.scss". Selepas itu, kami menyusun kod fail "styles.scss" dan pengguna boleh melihat kod fail "style.css" yang dikemas kini dalam imej output.

Nama fail - Style.scss

@import "fonts";
$height: 5rem;
$border: 2px, solid, blue;
div {
   height: $height;
   border: $border;
   border-radius: 1rem;
}
h1 {
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   color: $heading-font-color;
   font-family: $heading-font-family;
}
p {
   font-size: $paragraph-font-size;
   font-weight: 200;
}

Nama fail - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-color: #000;
$heading-font-family: "Roboto", sans-serif;

OUTPUT

Contoh 2

Contoh 2

Dalam contoh di bawah, kami menambah pembolehubah berkaitan warna pada fail "color.scss" dan pembolehubah berkaitan fon pada fail "fonts.scss". Dalam fail "style.scss", kami menggunakan arahan "@import" untuk mengimport fail "fonts.scss" dan "colors.scss" bersama-sama.

Dalam fail "style.scss", kami menggunakan pembolehubah warna dan fon. Dalam output, pengguna boleh melihat nilai sifat CSS tertentu di mana kita menggunakan pembolehubah.

Nama fail - Style.scss

@import "fonts", "colors";
div {
   color: $text-color;
   background-color: $background-color;
}
ul {
   li {
      color: $text-color;
      background-color: $background-color;
      font-size: $normal-font-size;
   }
}
h1 {
   color: $primary-color;
   font-size: $heading-font-size;
   font-weight: $heading-font-weight;
   font-family: $heading-font-family;
}

Nama fail - Colors.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

Nama fail - Fonts.scss

$normal-font-size: 1rem;
$paragraph-font-size: 1.2rem;
$heading-font-size: 1.5rem;
$heading-font-weight: 700;
$heading-font-family: "Roboto", sans-serif;

OUTPUT

Kelebihan menggunakan arahan @import

Terdapat beberapa faedah menggunakan arahan "@import", yang kami terangkan di bawah.

• Kami boleh mengimport kod CSS satu fail ke dalam fail lain.

• Kami boleh mencipta fail CSS yang berasingan untuk setiap komponen kod dan mengimportnya apabila diperlukan.

Keburukan menggunakan arahan @import

Terdapat beberapa keburukan menggunakan arahan '@import', yang kami terangkan di bawah.

• Ia menjadikan segala-galanya dalam fail CSS, seperti pembolehubah, fungsi, campuran, dll., boleh diakses secara global. Oleh itu, adalah sukar bagi pembangun untuk menentukan tempat pembolehubah tertentu ditakrifkan.

• Memandangkan segala-galanya dalam setiap fail yang diimport menjadi global, setiap fail harus mempunyai nama pembolehubah yang berbeza untuk mengelakkan konflik.

• Pengkompil SASS menyusun setiap fail scss, sama ada diimport atau tidak, yang meningkatkan masa penyusunan dan mengurangkan kecekapan kod.

Menggunakan fail separa dalam SASS

Untuk menyelesaikan kekurangan di atas, kita boleh menggunakan separa dalam SASS. Kita boleh mencipta fail scss separa dengan meletakkan awalan nama fail dengan garis bawah. Contohnya, '_test.scss', '_colors.scss', dsb.

Setiap kali kami menggunakan separa, penterjemah SASS tidak akan menyusun kod fail separa, yang boleh meningkatkan kecekapan kod. Walau bagaimanapun, kami boleh mengimport kandungan fail scss separa ke dalam fail scss utama.

Ini adalah contoh menggunakan fail scss separa.

Contoh 3

Dalam contoh di bawah, kami mencipta fail separa '_colors.scss' dan mengimportnya dalam fail 'style.scss'. Dalam contoh ini, kod menyusun dengan lebih cekap kerana kami menggunakan fail separa.

Walau bagaimanapun, output kod tetap sama sama ada kita menggunakan sebahagian daripada kod atau tidak.

Nama fail - Style.scss

@import "colors";
img {
   width: 100%;
   height: 100%;
   background-color: $background-color;
}
p {
   color: $text-color;
}

Nama fail - _Color.scss

$text-color: #000;
$background-color: #fff;
$primary-color: #000;
$secondary-color: #fff;
$tertiary-color: #000;

OUTPUT

Pengguna belajar menggunakan arahan "@import" untuk mengimport kod satu fail ke dalam fail lain. Ia membantu kami memecahkan kod SCSS kepada bahagian yang lebih kecil dan mengelakkan pertindihan. Walau bagaimanapun, menggunakan arahan @import mempunyai beberapa kelemahan, tetapi kita boleh menggunakan separa untuk menyelesaikan masalah ini.

Atas ialah kandungan terperinci Apakah kegunaan fungsi SASS @import?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!