Mengapa '_' ditambah di hadapan nama fail dalam SCSS?-tutorial css-php.cn

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

WBOY

Lepaskan： 2023-08-25 14:09:13

ke hadapan

1312 orang telah melayarinya

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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!