Cara membuat fail KURANG dan cara menyusunnya-html tutorial-php.cn

Cara membuat fail KURANG dan cara menyusunnya

WBOY

Lepaskan： 2023-09-13 16:29:06

ke hadapan

866 orang telah melayarinya

Ikhtisar

A Lean Gaya Lebih Kurus (LESS) ialah bahasa prapemprosesan dinamik yang bahasa asasnya ialah Cascading Style Sheets (CSS). Semua bahasa prapemprosesan adalah versi bahasa asas yang dinaik taraf, jadi LESS juga mempunyai banyak ciri tambahan. LESS mempunyai fungsi seperti pembolehubah, pemilih induk, campuran dan pemilih bersarang. Di Java, menyusun kod sumber fail ".java" akan menjana fail output ".class", begitu juga, menyusun fail ".less" bagi fail LESS akan menghasilkan fail baharu " .css" ” sebagai output.

Kaedah

Untuk membuat dan menyusun fail KURANG kita perlu mengikuti langkah berikut -

Buka Terminal pada desktop atau baris arahan (cmd) anda. Gunakan Pengurus Pakej Node (npm) untuk memasang persekitaran Lembaran Gaya Pelajar (LESS) ke komputer anda secara global.

npm install less –g

Salin selepas log masuk

Buat folder pada desktop anda. Sekarang buka mana-mana editor teks dan tulis KURANG kod di dalamnya.
Simpan fail yang mengandungi kod ".less" sebagai "style.less".
Sekarang buka Antara Muka Baris Perintah (CLI) dan gunakan nama folder cd arahan untuk mencapai subfolder tempat anda mencipta fail “style.less”. "cd" bermaksud tukar direktori.
Selepas mencapai folder tempat letak fail yang kurang, masukkan arahan berikut untuk menyusun "style.less", dan fail "style.css" akan dijana.

lessc style.less > style.css

Salin selepas log masuk

Buka fail "style.css", kod di dalamnya ialah kod css yang ditukar bagi fail "style.less".

Ciri-ciri

Helaian Gaya Lebih Kurus (KURANG) ciri utama ialah −

Variables− Kurang bahasa mempunyai ciri untuk mencipta pembolehubah dan menyimpan nilai sifat CSS di dalamnya. Awalan untuk mencipta pembolehubah dalam kurang fail ialah "@". Contohnya: @width:10rem, @height:10rem, @background: hijau, dsb.
Pencampuran− Ciri ini menyediakan keupayaan untuk menulis kod gaya tanpa pendua. Kita boleh menggunakan semula gaya yang dibuat di atas sebagai gaya untuk elemen lain.

Sebagai contoh −

@width:10px; //variables created
@height:@width+10px; //variables created
.box{ //box class is styled using the above variable
   width:@width;
   height:@height;
}
.profile{
   .box(); //.box() is used as mixins to inherit the property of box in profile
}

Salin selepas log masuk

Algoritma

Langkah 1 - Sebelum mula menulis kod, pasang penyusun kurang menggunakan kaedah yang disediakan di atas. Jika anda memasang pengkompil "kurang", anda boleh menyemaknya pada antara muka baris arahan menggunakan arahan berikut.

lessc –v

Salin selepas log masuk

Jika anda mempunyai pengkompil "less" dipasang pada komputer anda, anda akan mendapat output dengan nombor versinya.

Cara membuat fail KURANG dan cara menyusunnya

Langkah 2 − Buat folder bernama "LESS" pada desktop. Buat fail HTML dalam mana-mana editor teks dan tulis kod boilerplate HTML di dalamnya.

Langkah 3 - Buat fail "style.less" dalam folder yang sama dan tulis kod untuk menggayakan halaman web.

@textDecoration:underline;
@background:green;
@color:white;
@textAlign:center;
h1{
   background-color: @background;
   color: @color;
   text-align: @textAlign;
   padding: 1rem;
   border-radius: 5px;
}
span{
   text-decoration: @textDecoration;
}

Salin selepas log masuk

Langkah 4 − Sekarang gunakan Antara Muka Baris Perintah (CLI) untuk masuk ke subfolder yang telah kami buat pada desktop. Gunakan cd desktop, arahan cd less untuk sampai ke destinasi.

Langkah 5 − Sekarang gunakan arahan untuk menyusun fail “style.less”.

lessc style.less > style.css

Salin selepas log masuk

Langkah 6 - Selepas menyusun fail, fail "style.css" telah berjaya dibuat. Kini halaman web sedia untuk dimuatkan ke dalam penyemak imbas dengan gaya yang sesuai.

Contoh

Dalam contoh ini, kita akan melihat rupa halaman web apabila fail yang lebih sedikit tidak disusun dan bagaimana rupanya selepas ia disusun. Untuk mencapai matlamat ini, kami akan membuat halaman web yang memautkan fail css dan fail "kurang" dalam folder.

<html>
<head>
   <link rel="stylesheet" href="style.css">
   <title>LESS Example</title>
   <style>
      @textDecoration:underline;
      @background:green;
      @color:white;
      @textAlign:center;
      h1{
         background-color: @background;
         color: @color;
         text-align: @textAlign;
         padding: 1rem;
         border-radius: 5px;
      }
      span{
         text-decoration: @textDecoration;
      }
      h1 {
         background-color: green;
         color: white;
         text-align: center;
         padding: 1rem;
         border-radius: 5px;
      }
      span {
         text-decoration: underline;
      }
   </style>
</head>
<body>
   <h1>LESS</h1>
   <h1>LESS stands for <span>(Leaner Style Sheets)</span></h1>
</body>
</html>

Salin selepas log masuk

Imej yang diberikan di bawah menunjukkan output semasa menyusun "style.less", apabila halaman web dibina dan dipautkan dengan css, ia menunjukkan halaman hanya menunjukkan bahagian HTML tanpa gaya. Selepas menyusun fail "style.less", gaya yang ditulis dalam fail akan disusun dan fail style.css dicipta yang memaparkan output halaman web dengan gaya yang sesuai diberikan di bawah.

Kesimpulan

Lesser Style Sheets (LESS) sangat berguna apabila membina projek besar yang memerlukan penyelenggaraan fail "css" yang besar. Oleh itu, "LESS" menyediakan kefungsian pembolehubah, yang boleh mengelakkan kekacauan kod. Lebih mudah untuk mengekalkan kod "KURANG" berbanding "CSS", sebagai contoh, jika kita ingin menukar gaya butang di laman web, katakan kita perlu menukar jejari sempadan dan warna latar belakang butang, kemudian kita hanya perlu Membuat dua perubahan dalam pembolehubah dan bukannya membuat perubahan gaya dalam setiap elemen CSS menjadikan kehidupan pembangun lebih mudah.

Atas ialah kandungan terperinci Cara membuat fail KURANG dan cara menyusunnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!