Pemisahan fail dalam SASS-tutorial css-php.cn

Pemisahan fail dalam SASS

PHPz

Lepaskan： 2023-09-01 14:29:02

ke hadapan

885 orang telah melayarinya

SASS ialah pra-pemproses CSS, yang bermaksud

Syntactically Awesome Style Sheet SASS 中的文件分割 kod ditulis sama seperti bahasa skrip seperti JavaScript, tetapi pada masa penyusunan ia ditukar kepada CSS dan disusun sebagai. CSS dalam pelayar SASS boleh digunakan dengan mana-mana versi CSS Ia digunakan untuk meningkatkan dan memajukan cara menulis kod dalam CSS biasa.

Dalam ruang kerja biasa, kami biasa menulis keseluruhan kod dalam fail berasingan, yang menjadikan kod kami sukar dibaca dan difahami oleh pembangun lain. SASS membolehkan kami membahagikan fail dan memisahkan kod kepada berbilang fail. Proses membelah fail termasuk memecahkan satu fail besar kepada beberapa sub fail dan kemudian memautkannya antara satu sama lain, yang boleh dilakukan dengan mudah dengan menggunakan kaedah di bawah dalam SASS −

Dengan menggunakan @import dan separa

Dengan menggunakan @import dan fail separa

@import

untuk semua fail lain untuk disertakan atau. pautkannya bersama-sama dan dapatkan kod semua fail tersebut dalam fail itu.

Selepas semua sub fail dipautkan atau dimasukkan ke dalam fail biasa, anda perlu menjalankan arahan di bawah dalam folder yang sama di mana semua fail SASS wujud −

Sass –-watch common_file_name.scss final_output_file_name.scss

Salin selepas log masuk

Arahan di atas akan memautkan atau memasukkan keseluruhan kod fail SASS biasa ke dalam fail output akhir yang akan dipautkan ke dokumen HTML untuk menggayakan halaman. Mari kita bincangkan pelaksanaan kaedah di atas secara terperinci melalui contoh kod -

Langkah

Langkah 1

− Dalam langkah ini, kami akan mencipta berbilang fail SASS dengan sambungan .scss

Langkah 2 - Sekarang, kami akan mencipta fail SASS yang mengandungi penyataan @import untuk semua fail SASS yang dibuat dalam langkah sebelumnya.
Langkah Ketiga - Pada langkah terakhir, kami akan menggunakan arahan di atas untuk memasukkan atau memautkan fail awam ke dalam fail CSS terakhir dan kemudian memautkannya dengan dokumen HTML .
Terjemahan bahasa Cina bagi
Penjelasan ialah: Explain

Fail 1

− mari kita cipta fail bernama test.scss dan letakkan beberapa kod SASS di dalam fail itu.

test.css −

div{
   color: #fff;
   background: #444;
   margin: 15px;
}

Salin selepas log masuk

Fail 2 − Sekarang, buat fail bernama

common.scss.

common.scss −

@import "test.scss";
div{
   font-size: 22px;
   font-weight: bold;
   padding: 15px;
}

Salin selepas log masuk

Fail 3 − Ini akan menjadi fail terakhir kami final.css, yang akan mengandungi semua kod SASS dan akan dipautkan ke dokumen HTML.

Jalankan di bawah arahan −
```
sass –-watch common.scss final.css
```
Salin selepas log masuk
Salin selepas log masuk

final.css −

final.css:
/* imported code from test.scss */
div{
   color: #fff;
   background: #444;
   margin: 15px;
}
/* code from common.scss */
div{
   font-size: 22px;
   font-weight: bold;
   padding: 15px;
}

Salin selepas log masuk

Kini, kita boleh memautkan fail

final.css

dengan dokumen HTML untuk menggayakan halaman dengan CSS semua fail SASS seperti yang dilakukan dalam contoh di bawah. Contoh

Contoh di bawah akan membolehkan anda membuat dan memautkan berbilang fail SASS bersama-sama dan menggayakan halaman −

<html>
<head>
   <style>
      /* imported code from test.scss */
      div{
         color: #fff;
         background: #444;
         margin: 15px;
      }
      /* code from common.scss */
      div{
         font-size: 22px;
         font-weight: bold;
         padding: 15px;
      }
   </style>
</head>
<body>
   <div>
      <h2>This is Heading of First Div.</h2>
   </div>
   <div>
      <h2>This is Heading of Second Div.</h2>
   </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami telah menggunakan fail final.css akhir untuk menggayakan dokumen dengan semua gaya fail SASS.

NOTA

- Sila pastikan SASS diprapasang pada sistem anda untuk melaksanakan contoh kod di atas.

Dengan menggunakan @use dan fail separa

Gunakan @use kaedah untuk membenamkan gaya hampir serupa dengan kaedah

@import

. Anda hanya perlu awalan nama fail dengan garis bawah dan importnya menggunakan pernyataan @use. Ini juga akan membolehkan kami mengakses fungsi dan campuran yang ditakrifkan dalam fail SASS.

Terjemahan bahasa Cina bagi

Penjelasan ialah: Explain

Fail 1 − Fail 1 akan menjadi fail SASS yang mengandungi fungsi, campuran dan gaya CSS ringkas yang ditakrifkan dengan garis bawah sebagai awalan.

@function my_space(){
   $padding: "15px";
   return $padding;
}

Salin selepas log masuk

Fail 2 − Ini akan menjadi fail biasa yang memautkan semua fail SASS bersama-sama menggunakan pernyataan @use.

common.scss −

@use "test";
div{
   color: #fff;
   padding: test.my_space();
}

Salin selepas log masuk

Fail 3 − Fail ini ialah fail CSS terakhir, ia ialah versi terakhir semua gaya daripada semua fail SASS.

Jalankan di bawah arahan −
```
sass –-watch common.scss final.css
```
Salin selepas log masuk
Salin selepas log masuk

/* combined code from both files */
div{
   color: #fff;
   padding: 15px;
}

Salin selepas log masuk

Dengan cara ini, anda boleh melaksanakan SASS dengan membahagikan fail dan menambah gaya pada dokumen HTML dengan fail CSS pengeluaran terakhir.
Dalam artikel ini, kami mempelajari dua cara untuk memaut atau membenamkan fail SASS pisah ke dalam fail berasingan dan menggunakan fail CSS terakhir itu untuk menambah gaya pada halaman HTML kami.
Atas ialah kandungan terperinci Pemisahan fail dalam SASS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!