Rumah > Artikel > hujung hadapan web > Mengapa "_" ditambah di hadapan nama fail dalam SCSS?

Mengapa "_" ditambah di hadapan nama fail dalam SCSS?

WBOYke hadapan: 2023-08-25 14:09:131227semak imbas

Mengapa _ ditambah di hadapan nama fail dalam SCSS?

SCSS membenarkan pembangun menulis CSS dengan cara yang lebih berstruktur. Selain itu, kami boleh mencipta berbilang fail untuk CSS semasa menggunakan SCSS dan mengimport fail yang diperlukan ke dalam fail SCSS utama.

Dalam tutorial ini, kita akan melihat matlamat untuk menambah “_” sebelum nama fail dalam SCSS.

Bilakah anda perlu meletakkan "_" di hadapan nama fail dalam SCSS?

Setiap kali kami menambah -_' sebelum nama fail dalam SCSS, pengkompil mengabaikan fail semasa menyusun SCSS. Jika nama fail bermula dengan aksara "_", fail tersebut menjadi fail separa.

Sebagai contoh, kami mempunyai dua fail bernama "style.scss" dan "_partial.scss". Pengkompil hanya menyusun fail style.scss dan mengabaikan fail _partial.scss. Walau bagaimanapun, jika kita perlu menggunakan css fail _partial.scss, kita boleh mengimportnya ke dalam fail style.scss.

Contoh

Contoh di bawah menunjukkan cara menggunakan SCSS dengan html.

Nama fail – demo.html

Kami telah menambahkan fail "style.css" pada fail di bawah menggunakan teg "", yang dijana oleh pengkompil SCSS. Dalam output, pengguna boleh melihat bahawa CSS digunakan pada teks elemen div dan teks menjadi condong.

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Nama fail – style.scss

Dalam fail di bawah, kami telah mencipta pembolehubah untuk menyimpan saiz dan gaya fon. Selepas itu, kami menggunakan pembolehubah untuk menggayakan elemen div.

$font-size : 20px;
$font-style: italic;
div {
   font-size: $font-size;
   font-style: $font-style;
}

Nama fail – style.css

Setiap kali kami menyusun fail style.scss, ia akan menjana kod berikut untuk digunakan oleh fail html.

div {
   font-size: 20px;
   font-style: italic;
}

Contoh

<html>
<head>
   <style>
      /* compiled scss code */
      div {
         font-size: 20px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Contoh

Dalam contoh ini, kami menunjukkan cara menambah "_" di hadapan nama fail dan cara menggunakan CSSnya dalam fail css utama.

Nama fail – demo.html

Fail di bawah mengandungi kod HTML ringkas dan mengandungi fail "style.css" dalam teg

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Nama fail - _partial.css

Pengguna perlu mencipta fail _partial.scss dengan "_" di hadapan nama fail. Selepas itu, pengguna perlu menambah kod berikut dalam fail. Apabila kami menyusun kod SCSS, pengkompil akan mengabaikan kod fail ini

$text-color: blue;
$border-width: 2px;
$border-style: solid;
$border-color: green;

Nama fail – style.scss

Kini, pengguna perlu menambah kod berikut pada fail style.scss, iaitu fail css utama. Dalam kod di bawah, kami telah mengimport css daripada fail "_partial.css". Dengan cara ini kita boleh menggunakan kod daripada sebahagian daripada fail.

@import "partial"
div {
   color: $text-color;
   border: $border-width $border-style $border-color;
}

Nama fail – style.css

Setiap kali kami menyusun fail style.scss, ia akan menjana fail style.css secara automatik.

div {
   color: blue;
   border: 2px solid green;
}

Contoh

<html>
<head>
   <style>
      /* compiled SCSS code from the _partial.css file */
      div {
         color: blue;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Motivasi utama untuk memasukkan "_" sebelum nama fail dalam SCSS adalah untuk membahagikan fail supaya pengkompil boleh mengabaikannya. Setiap kali kita perlu menggunakan css fail separa, kita boleh mengimportnya ke dalam fail utama.

Faedah utama menggunakan fail separa ialah kita tidak perlu menulis kod pendua, menjadikannya lebih jelas. Sebagai contoh, kami boleh menambah fail separa yang berbeza untuk bahagian CSS yang berlainan dan menggunakannya apabila diperlukan.

Atas ialah kandungan terperinci Mengapa "_" ditambah di hadapan nama fail dalam SCSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Kawal penomboran menggunakan CSSArtikel seterusnya：Kawal penomboran menggunakan CSS

Artikel berkaitan

Lihat lagi