简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

Pemisahan fail dalam SASS

PHPz
Lepaskan： 2023-09-01 14:29:02
ke hadapan
778 orang telah melayarinya

SASS ialah pra-pemproses CSS, yang bermaksud

Syntactically Awesome Style SheetSASS 中的文件分割 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 @penggunaan dan separa

    • Marilah kita memahami kaedah di atas secara terperinci dengan contoh kod untuk memautkan berbilang subfail bagi satu fail dalam SASS.

  • Dengan menggunakan @import dan fail separa

    • Dalam kaedah ini, kami akan menulis gaya seperti yang biasa kami tulis dalam fail CSS Tetapi akan ada fail biasa yang mengandungi penyataan
@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.
    Fail ini akan memautkan semua sub fail menggunakan pernyataan @import .

  • 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.

    _test.scss −

  • @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
    final.css −

    /* 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!

sumber：tutorialspoint.com
Artikel sebelumnya：Bagaimana untuk menangguhkan kesan peralihan menggunakan CSS Artikel seterusnya：Apakah iframe dalam css
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1451
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
9
1615
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1382
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1303
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1355
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！