Bagaimana untuk meninggalkan konfigurasi dalam VSCode untuk menggunakan Less dengan cepat

Artikel ini akan memperkenalkan kepada anda cara menggunakan Less in VSCode dengan mengetepikan konfigurasi saya harap ia akan membantu anda!

Kurang

Semasa proses pengeluaran halaman hadapan, jika terdapat banyak elemen dalam halaman dan hierarki struktur adalah kompleks, ia akan menyebabkan CSS yang kami tulis sangat berlebihan dan tidak mudah diselenggara. [Pembelajaran yang disyorkan: "tutorial vskod"]

Jadi terdapat banyak sambungan untuk CSS, seperti Less, Sass dan prapemproses CSS yang lain.

Secara umumnya, apabila menggunakan CSS bahasa sambungan ini, anda akan mula-mula menggunakan npm untuk memuat turunnya, dan kemudian mengkonfigurasinya dalam webpack.

Walaupun anda juga boleh kurang mengimport terus ke dalam penyemak imbas, anda mesti memperkenalkan pemalam css bersih dahulu.

Tetapi jika anda ingin menggunakan less untuk menulis gaya dengan cara terpantas, kaedah yang saya temui ialah menggunakan pemalam vs code dan biarkan vs code terus menyusun dan melengkapkan css untuk awak. Kaedah ini juga yang biasa saya gunakan sekarang.

Mudah Kurang

Di sini kami mengesyorkan pemalam yang dipanggil Easy Less.

Easy LessIa akan berkuat kuasa selepas dipasang terus dalam stor sambungan kod vs Sekarang kita boleh mencipta fail yang kurang dan kemudian menggunakan kurang untuk menulis kod gaya ia. , selepas menyimpan, anda akan mendapati bahawa fail css dengan nama yang sama akan dijana dalam folder kurang pada tahap yang sama.

Kandungan dalam fail Kurang:

@setColor:{
    1: #ff0000;
    2: #ff0;
    3: #f0f;
    4: #0ff;
    5: #00f;
}
#app {
    .ul {
        each(@setColor, {
            .li@{key} {
                background-color: @value;
                width: 100px;
                height: 20px;
            }
        })
    }
}

Kod CSS yang dijana:

#app .ul .li1 {
  background-color: #ff0000;
  width: 100px;
  height: 20px;
}
#app .ul .li2 {
  background-color: #ff0;
  width: 100px;
  height: 20px;
}
#app .ul .li3 {
  background-color: #f0f;
  width: 100px;
  height: 20px;
}
#app .ul .li4 {
  background-color: #0ff;
  width: 100px;
  height: 20px;
}
#app .ul .li5 {
  background-color: #00f;
  width: 100px;
  height: 20px;
}

Dengan cara ini, apabila halaman diperkenalkan, Anda boleh mengimport fail CSS ini secara langsung tanpa perlu melakukan kerja penukaran tambahan. Malah, dalam vs code, bukan sahaja alat ringkas less, tetapi juga pemalam alat sass Jika anda berminat, anda boleh mencubanya.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk meninggalkan konfigurasi dalam VSCode untuk menggunakan Less dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!