Masuk ke LESS: Bahasa Pemprograman Stylesheet

() translation by (you can also view the original English article)

Saya tidak suka CSS, biasa dan sederhana. Ia membuat dunia berputar di web, namun bahasanya bersifat membatasi dan sulit dikelola. Saatnya untuk merapikan bahasa dan membuatnya lebih berguna dengan menggunakan CSS dinamis dengan bantuan LESS.

Mari saya gambarkan maksud saya dengan contoh. Alih-alih menggunakan # FF9F94 untuk mendapatkan warna peach yang gelap, bukankah akan lebih mudah untuk menyimpan nilai warna di dalam sebuah variabel dan cukup gunakan variabel itu? Jika anda ingin mewarnai kembali halaman web anda, anda hanya perlu mengubah nilai variabel di satu tempat dan hanya itu saja.

Dengan kata lain: akan sangat menyenangkan jika kita bisa menggunakan beberapa pemrograman dan logika di dalam CSS untuk membuatnya menjadi alat yang lebih hebat. Kabar baiknya adalah bahwa kita bisa melalukannya dengan bantuan LESS.

Apa itu LESS?

LESS merupakan superset dari CSS. Ini berarti bahwa semua kode CSS adalah kode LESS yang valid tapi ada elemen tambahan dalam LESS yang tidak akan berlaku di CSS. Ini bagus karena CSS yang ada sudah ada kode LESS yang valid, meminimalkan kurva belajar menggunakan LESS.

LESS menambahkan sifat dinamis yang sangat dibutuhkan ke CSS. Ia memperkenalkan variabel, operasi, fungsi-seperti elemen, bahkan Javascript ke dalam campuran. Ia akan membuat hidup anda bebas dari kerumitan dengan memungkinkan anda menulis stylesheet dengan pola pikir modular.

Bagaimana Menggunakan LESS

Terdapat dua cara untuk menggunakan LESS. Anda dapat membuat file LESS dan mengonversinya sesuai permintaan menggunakan file Javascript atau anda dapat mengkompilasi ulang dan menggunakan file CSS yang dihasilkan. Jika anda merasa takut karena anda melihat kata "kompilasi" (saya sudah terbiasa) tolong jangan ke mana-mana, itu sangat mudah.

Menggunakan File Javascript LESS

Pertama-tama, menuju ke situs LESS dan ambil file Javascript. Setelah anda memilikinya, semua yang perlu anda lakukan adalah menghubungkannya ke halaman anda seperti file Javascript lainnya.

1	<script src="less.js" type="text/javascript"></script>

Selanjutnya, buat file dengan ekstensi .less dan hubungkan ke halaman anda dengan kode di bawah ini:

1	<link rel="stylesheet/less" type="text/css" href="style.less">

Pastikan Anda menghubungkan file LESS Anda sebelum file Javascript.

Setelah anda menyiapkan ini, anda dapat menempelkan kode CSS yang ada ke file LESS atau hanya menulis beberapa peraturan baru - ini harus sesuai dengan CSS biasa.

Kompilasi File LESS

Walaupun ini sedikit lebih membosankan, dalam beberapa skenario ini lebih diutamakan. LESS bekerja dengan mengambil semua kode LESS yang anda tulis dan mengubahnya menjadi CSS dengan cepat. Alih-alih melakukan ini sesuai permintaan, Kita dapat mengonversi file Less kita, menyimpan hasil CSS dan menggunakannya alih-alih melakukan konversi sesuai permintaan pada setiap pemuatan halaman.

Jika anda pengguna Mac, anda dapat menggunakan LESS.app, sebuah aplikasi kecil yang dapat mendeteksi semua file LESS anda secara otomatis dan kapan pun anda menyimpannya, ia akan mengkonversikannya ke file CSS dengan nama yang sama. Hal ini memungkinkan anda tetap terhubung ke file CSS anda di halaman anda sambil tetap memanfaatkan potensi LESS.

Jika anda menggunakan Windows, anda bisa menggunakan Winless yang bekerja dengan cara yang sama.

Jika anda lebih memilih alat command-line, anda dapat menggunakan Node Package Manager (NPM) untuk menginstal LESS. Beberapa dokumentasi tersedia di situs LESS. Anda juga bisa mengambil kode langsung dari repositori Github.

Memanfaatkan Kekuatan LESS

Akhirnya, mari kita mulai dengan sedikit kesenangan - menulis kode LESS. Seperti yang akan anda lihat, kode LESS sangat mudah dibaca dan dimengerti; ia menggunakan gaya sintaks yang sama seperti CSS sehingga ia seharusnya tidak asing lagi bagi anda.

Variabel

Variabel-variabel dalam LESS bekerja persis seperti yang mereka lakukan di PHP atau kebanyakan bahasa pemrograman lainnya. Anda dapat menggunakannya untuk menyimpan nilai dan kemudian menggunakan variabel daripada nilainya sendiri kapan pun anda membutuhkannya.

@header-font: Georgia;
h1, h2, h3, h4 {
  font-family: @header-font; 
}
.large {
	font-family:@header-font;
}

Pada contoh di atas, kami mendefinisikan variabel @header-font dan memberi nilai "Georgia" untuk itu. Kita sekarang bisa menggunakan variabel ini setiap kali kita ingin menggunakan font Georgia. Jika kita memutuskan bahwa kita lebih suka menggunakan Trebuchet MS sebagai font utama kita, kita tidak perlu melewati keseluruhan file kita, kita hanya perlu mengubah nilai variabelnya.

Saya menemukan penggunaan yang bagus untuk variabel ketika menentukan warna untuk sebuah situs web. Di masa lalu yang baik (yang tidak lama berlalu) saya biasa melakukan sesuatu seperti ini:

/* 
 Colors for my Website 
 	#ff9900 - Orange - used for links and highlighted items
    #cccccc - Light Gray - used for borders     
    #333333 - Dark Black - Used for dark backgrounds and heading text color
    #454545 - Mid Black - Used for general text color
*/
body {
	background: #333333;        
	color: #454545;
}
a { 
	color:#ff9900;
}
h1, h2, h3, h4, h5, h6 { 
	color: #333333;
}

Tidak ada yang salah dengan mendokumentasikan warna anda seperti ini, ini adalah praktik yang baik, masalahnya adalah karena hal itu tidak ada hubungannya dengan fungsionalitas stylesheet anda, maka ia tidak memiliki kegunaan selain dokumentasi itu sendiri. Jika anda memutuskan warna yang berbeda setelah garis 2.000 dan kemudian berubah pikiran pada baris 3.567, sulit untuk memastikan warna yang tepat untuk digunakan dan dokumentasinya harus baik.

Dengan LESS kita bisa memodifikasi alur kerja kita dan benar-benar menggunakan "dokumentasi" kita, bukan membiarkan pengamat pasif dalam prosesnya.

/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc; 
@color-black_dark: #333333;  
@color-black_medium: #454545;  

body { 
	background: @color-black_dark;
	color: @color-black_medium;
}
a {
	color:@color-orange;
}
h1, h2, h3, h4, h5, h6 {
	color: @color-black_dark;
}

Lingkup Variabel

Ruang lingkup variabel mengacu pada tempat di mana ia tersedia. Jika anda mendefinisikan sebuah variabel pada awal file KURANG anda, itu akan tersedia untuk kode yang anda tulis setelah itu.

Anda juga dapat menentukan variabel di dalam aturan CSS. Dalam hal ini, variabel tidak tersedia di luar peraturanya; ia hanya bisa digunakan secara lokal.

a {
	@color: #ff9900;
	color:@color;
}
button { 
	background: @color;
}

Pada contoh di atas file LESS tidak akan dikonversi karena ada kesalahan, @color tidak dimaksudkan untuk digunakan di dalam elemen tombol. Jika sebuah variabel ditetapkan di luar elemen dan di dalam elemen, definisi lokal lebih diutamakan.

@color: #222222;
a {
	@color: #ffffff;
	color:@color;
} 
button {
	background: @color; 
}

Pada contoh di atas link akan berwarna putih, tombol akan memiliki background hitam.

Variabel Variabel

Jika anda terbiasa untuk mengcoding di PHP, anda tahu bahwa anda dapat menentukan nama variabel dengan variabel lain.

1	@color-chirstmas_red: #941f1f;
2	@name-of-color: "color-chirstmas_red";
3	color: @@name-of-color;

Bagi saya pribadi, ini kurang digunakan (tidak dimaksudkan) karena kekuatan variabel variabel berkurang tanpa penggunaan loop tapi saya yakin ada beberapa contoh cerdas di luar sana memanfaatkannya.

Contents VS Variabel

Yang penting untuk dicatat adalah bahwa bertentangan dengan apa yang baru saja anda baca, variable-variabel dalam LESS lebih seperti konstanta. Ini berarti bahwa mereka hanya dapat didefinisikan sekali - berlawanan dengan variabel yang dapat didefinisikan sebanyak yang anda mau.

Operasi

Anda dapat mencapai kontrol yang sangat terperinci dan akurat dengan bantuan operasi dalam LESS. Gagasan di balik ini sungguh sederhana:

.button{
	@unit: 3px;
	border:@unit solid #ddd;
	padding: @unit * 3;
	margin: @unit * 2;
}

Kode di atas mendefinisikan variabel @unit sebagai 3px. Kemudian berlanjut untuk menentukan bahwa pembatas memiliki lebar yang sama persis, padding memiliki lebar tiga kali lipat dan marginnya memiliki lebar dua kali lipat.

Operasi bisa berupa perkalian, pembagian, penambahan dan pengurangan. Untuk membuat kotak dengan pembatas yang semakin lebar saat anda bergerak searah jarum jam sepanjang perimeter, anda bisa menggunakan kode berikut.

1	.box{
2	@base_unit: 1px;
3	border: @base_unit @base_unit + 1 @base_unit + 2 @base_unit + 3
4	}

Manajemen Warna

Fitur LESS favorit saya adalah manajemen warna. Anda dapat menggunakan operasi untuk mencampur warna dan ada beberapa fungsi warna tertentu.

Operasi Warna

Jika anda ingin mengubah nilai warna, anda dapat melakukannya dengan mengurangi atau menambahkan warna lain ke dalamnya.

1	@color: #941f1f;
2	button {
3	background: #941f1f + #222222;
4	border: #941f1f - #111111;
5	}

Operasi di atas pada latar belakang akan meningkatkan nilai HEX sebesar 2. Ia menghasilkan "B64141" yang merupakan variasi warna asli yang lebih ringan. Operasi di perbatasan akan menurunkan setiap nilai HEX menjadi 1 yang menghasilkan warna yang lebih gelap: "830E0E".

Dalam prakteknya, ada beberapa kasus di mana kita memulai dengan warna dasar dan memerlukan versi yang sedikit gelap atau ringan.

@color-button: #d24444;
input.submit {  
	color:#fff;
	background:@color-button;   
	border:1px solid @color-button - #222;
	padding:5px 12px;
}

Ia menciptakan tombol merah yang memiliki batas yang sedikit lebih gelap. Ini adalah sesuatu yang mungkin sangat sering anda butuhkan dan tidak harus mendefinisikan warna border secara terpisah adalah hal yang sangat membantu.

Kekuatan variabel bahkan lebih jelas disini. Jika anda ingin mewarnai kembali situs web dan mengubah @color-button value menjadi warna hijau, tidak hanya latar belakang tombol yang berubah namun perbatasan juga berubah dan menjadi versi yang lebih dalam dari warna hijau.

Penggunaan hebat lainnya adalah menciptakan gradien. Saya biasanya memilih warna mid-point dan menentukan gradien dari sana. Saya membuat permulaan sedikit lebih ringan dan ujungnya sedikit lebih gelap. Ia akan menghasilkan transisi yang bagus, seperti ini:

@color: #faa51a;
.button { 
	background: -webkit-gradient(linear, left top, left bottom, from(@color + #151515), to(@color - #151515));
	background: -moz-linear-gradient(top,  @color + #151515,  @color - #151515);
}

Fungsi Warna

Masih banyak lagi yang bisa anda lakukan dengan warna-warna; LESS memungkinkan anda untuk memanipulasi mereka di tingkat saluran. Anda bisa meringankan, menggelapkan, menjenuhkan, mendehaturasi, memudarkan, memudarkan secara perlahan dan memutar warna. Lihatlah contoh dan gambar berikut untuk melihat apa yang masing-masing dari mereka dapat lakukan.

@color: #3d82d1;
.left_box {  
	background:lighten(@color, 20%);
}
.right_box {
	background:darken(@color, 20%);
}

@color: #3d82d1;.left_box {
	background: desaturate(@color, 18%);
}
.middle_box {   
	background: @color;
}
.right_box {
	background: saturate(@color, 18%);
}

@color: #3d82d1;.left_box {
	background: spin(@color, 25%);
}
.middle_box { 
	background: @color;
}
.right_box {
	background: spin(@color, -25%);
}

Mengekstrak Informasi Warna

Setiap warna dalam LESS diubah menjadi HSL (rona, saturasi, ringan) guna memungkinkan anda mengelolanya pada tingkat saluran. Oleh karenanya, anda dapat memanipulasi warna dengan cara yang lebih masuk akal dan juga mengakses informasi saluran secara langsung:

1	@color = #167e8a;
2	hue(@color);
3	saturation(@color);
4	lightness(@color);

Ini mungkin tampak seperti micromanagement - mengapa kita memerlukan informasi ini saat kita bisa memasukkan nilai HEX? Jika anda seperti kebanyakan orang, nilai HEX tidak normal bagi anda. Nilai HEX memetakan spektrum RGB. Dua karakter pertama mengendalikan jumlah warna merah, dua angka berikutnya hijau dan dua warna biru terakhir.

Sudah cukup jelas bahwa # ff0000 berwarna merah karena RGB (255,0,0), Bbanyak merah, tidak hijau dan tidak biru. Namun, jika anda hanya melihat # 1f6b2d, sulit untuk menguraikan bahwa ia adalah warna hijau tua. Dengan skala HSL, rona mengendalikan apa yang anda sebut warna, sisanya hanya mengatur suasana (ini tidak tepat, tapi untuk semua maksud dan tujuannya).

Dengan pemikiran itu, jika anda menemukan warna ungu magenta yang bagus seperti # e147d4, anda dapat menemukan warna yang berbeda dengan warna yang sama dengan sangat mudah. Katakanlah anda ingin membuat versi yang lebih anyaman, lebih pastel # e147d4, inilah yang dapat anda lakukan:

1	@color: #e147d4;
2	@new_color: hsl(hue(@color), 35%, 77%);

Warna baru ini akan memiliki rona yang sama namun saturasi dan kecerahan yang berbeda. Hasilnya akan #c480bf, hasil yang cukup sulit didapat dari # e147d4 jika anda hanya berpikir di HEX.

Menggabungkan Funtions

LESS memungkinkan anda untuk menggunakan fungsi di dalam fungsi, jadi jika anda ingin melakukan desaturasi dan memutar warna, anda dapat melakukannya dengan sekejap seperti ini:

1	@color: #c480bd;
2	.class {
3	background-color: desaturate(spin(@color, 18), 12%);}

Nesting

Saat menulis CSS, anda menggunakan gaya cascading. Untuk mengubah margin paragraf di dalam postingan blog, hanya anda sjaa yang bisa menggunakan kode berikut.

1	article.post p{
2	margin: 0 0 12px 0;
3	}

Tidak ada salahnya dengan pendekatan ini tapi ketika anda juga ingin mengubah link, blockquotes, heading, teks pre-formatted dan yang lainnya di dalam elemen yang sama ini, anda perlumenaruh masing-masing dengan "article.post" di awal. Hal ini membuat kode kita lebih membosankan untuk ditulis dan sulit dibaca.

Dalam LESS kita bisa menemukan aturan-aturan yang memberi versi stylesheet yang lebih pendek dan lebih logis. Amatilah.

article.post {
	p{
		margin: 0 0 12px 0;
	}   
	a {
		color: red; 
	}
	a:hover {
		color: blue;
	}   
	img {
		float:left; 
	}
}

Lihat apa yang saya lakukan di sana? Ngomong-ngomong, tabbing tidak diperlukan tapi membuatnya jauh lebih mudah dibaca. Anda bisa menggunakan aturan sebanyak yang anda inginkan yang akan meredam kekhawatiran nanti. Pernahkah anda ingin mengganti padding dari sesuatu tapi anda takut karena anda tidak tahu dengan seksama elemen apa yang mungkin berpengaruh? Dengan menggunakan nesting anda bisa melakukan banyak dugaan dari CSS anda.

a {  
	color:red;
}
p {
	margin:0px;
}
article {
	a {
		color: green;       
	}    
	p { 
		color: #555;
		a { 
			color:blue; 
		}   
	}
}

Mixins

Mixins dalam LESS adalah sebuah fitur yang akan menghemat paling banyak pengetikan. Pernahkah anda membuat sebuah pembatas bulat dimana hanya sudut kiri atas dan kanan yang dibulatkan?

.tab { 
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;       
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px; 
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

Uggh ... Setiap saat ... Dengan LESS, anda bisa mengubah semua itu dengan menciptakan mixin. Mixins adalah elemen yang dapat digunakan kembali yang dapat anda tambahkan sebagai aturan untuk elemen lainnya. Keindahan mixins adalah tidak ada sintaks tambahan untuk dipelajari.

.rounded_top {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px; 
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px; 
	border-top-right-radius: 6px;
}
.tab {  
	background: #333;
	color:#fff; 
	.rounded_top;
}
.submit { 
	.rounded_top;
}

Pada kode di atas, kita mendefinisikan elemen .rounded_top guna memiliki sudut bulat di atas. Ketika kita menambahkan ini ke elemen lain sebagai mixin (lihat .tab), kita pada dasarnya mengimpor aturan yang kita buat untuk itu. Karena sintaks mixin, anda bisa menggunakan elemen lama sebagai mixin.

.rounded_top {   
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;       
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;   
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tab {
	background: #333;   
	color:#fff;
	.rounded_top;
}
.submit {
	.tab;       
	background: red;
}

Aturan CSS untuk elemen .submit sekarang akan memanggil sudut bulat di atas, warna putih dan latar belakang merah (orisinal # 333 ditimpa). kelebihan tulisan)

Mixins Parametrik

Mixins Parametric terdengar sangat kompleks namun ia memecahkan masalah dengan cara yang sangat sederhana. Pada contoh di atas, anda melihat bagaimana kita bisa mendefinisikan sebuah elemen untuk memiliki radius 6px pada sudut atasnya. Bagaimana bila kita menginginkan sebuah elemen yang memiliki radius 3px? Haruskah kita mendeklarasikan mixin terpisah untuk semua nilai pixel? Jawabannya tentu saja tidak, kita harus menggunakan mixins parametrik!

mixins parametrik menyerupai fungsi karena anda tidak hanya membuat mixin tapi anda bisa melewatkan nilai saat anda memanggilnya. Mari kita tulis ulang contoh radius perbatasan untuk melihat bagaimana hal itu dilakukan.

.rounded_top(@radius) {   
	-webkit-border-top-left-radius: @radius;
	-webkit-border-top-right-radius: @radius;   
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}
.tab {
	background: #333;   
	color:#fff;
	.rounded_top(6px);
}
.submit {
	.rounded_top(3px);
}

Kode di atas akan memberi elemen tab radius 6px sedangkan elemen .submit kami akan menerima radius 3px.

Nilai Default

Jika anda biasanya menggunakan radius border yang sama, namun dalam beberapa kasus anda memerlukan radius border yang berbeda yang bisa anda berikan untuk mencampuradukkan nilai default.

.rounded_top(@radius:6px) {      
	-webkit-border-top-left-radius: @radius;
	-webkit-border-top-right-radius: @radius;   
	-moz-border-radius-topleft: @radius;
	-moz-border-radius-topright: @radius;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}
.tab { 
	background: #333;   
	color:#fff;
	.rounded_top;
}

.submit {
	.rounded_top(3px);
}

Dalam contoh ini, elemen tab akan menerima radius batas 6px default namun elemen .submit akan menerima pesan 3px sesuai kebutuhan.

Multiple Parameters

Anda juga dapat menggunakan multiple parameters untuk mendefinisikan mixin yang lebih kompleks.

.radius(@radius:6px) {
	-webkit-border-radius: @radius;     
	-moz-border-radius: @radius; 
	border-radius: @radius;
}
.button(@radius:3px, @background: #e7ba64, @padding: 4px) {
	.radius(@radius);   
	background:@background;
	border: 1px solid @background - #222;       
	padding: @padding;
}
.read_more {   
	.button(0px);
}

Kapan pun anda membuat elemen dengan kelas .read_more yang menggunakan contoh di atas, ia akan memformatnya dengan bantalan 4px, warna latar belakang # e7ba64 dan dengan radius perbatasan 0px.

Menggunakan Semua Argumen Seketika

Satu lagi pilihan yang anda miliki saat menggunakan argumen adalah menggunakan keseluruhan semuanya sekaligus. Sifat steno dalam CSS memiliki beberapa nilai yang ditulis satu demi satu.

1	div {
2	border:1px solid #bbb;
3	}

Anda bisa menggunakan fungsi untuk memberi semua elemen yang dibutuhkan seperti batas abu-abu:

.gray_border(@width: 1px, @type: solid, @color: #bbb){
	border:@arguments;
}
div {
	.gray_border(2px, dashed);
}

@arguments adalah kata kunci khusus, ia akan menampilkan semua parameter satu demi satu sesuai urutan yang diberikan. Dalam kasus di atas, kode CSS yang dihasilkan dari file LESS anda akan menjadi:

1	div {
2	border:2px dashed #bbb;
3	}

Parametrik Mixins Tanpa Parameter

Juga memungkinkan untuk menggunakan parametrik mixins tanpa benar-benar menggunakan parameter apapun. Ini digunakan saat anda tidak** ingin mixin muncul di kode CSS anda namun anda** ingin aturannya diterapkan pada elemen yang menggunakannya.

.alert {
	background: red;    
	color: white;
	padding:5px 12px;
}
.error_message {
	.alert;     
	margin: 0 0 12px 0;
}

Output CSS di atas adalah sebagai berikut:

.alert { 
	background: red;
	color: white;       
	padding:5px 12px;
}
.error_message {
	background: red;
	color: white;
	padding:5px 12px;
	margin: 0 0 12px 0;
}

Jika Anda menggunakan parameter kosong, anda bisa menyembunyikan kelas .alert

.alert() {
	background: red;    
	color: white;
	padding:5px 12px;
}
.error_message {
	.alert;     
	margin: 0 0 12px 0;
}

CSS yang dihasilkan dari kode LESS di atas adalah:

.error_message {       
	background: red;
	color: white; 
	padding:5px 12px;
	margin: 0 0 12px 0;
}

Hal ini sangatlah berguna untuk mengurangi ukuran file CSS anda. Jika kelas .alert tidak pernah digunakan secara langsung pada elemen apa pun, tidak ada alasan untuk memilikinya dalam stylesheet yang dihasilkan asalkan propertinya dilewatkan ke elemen yang dibutuhkan sebagai mixin.

Namespaces

Namespace dalam bahasa pemrograman biasanya digunakan untuk mengelompokkan paket fungsionalitas bersama-sama. Kita bisa mencapainya dalam LESS dengan mengelompokkan kode kita menggunakan mixin.

#my_framework {
	p {
		margin: 12px 0;
	}
	a {
		color:blue;
		text-decoration: none;
	}           
	.submit {
		background: red;
		color: white;
		padding:5px 12px; 
	}    
}

Saat mulai mengerjakan situs web baru berdasarkan kerangka anda, anda dapat menambahkan paket #my_framework ini dan menggunakannya tanpa mengacaukan ragam lainnya yang mungkin sudah atau ingin anda tambahkan di masa mendatang.

1	.submit_button {
2	#my_framework > .submit;
3	}

Ini juga merupakan cara yang bagus untuk mengaktifkan perubahan dan modifikasi tema dengan cepat. Jika anda mengembangkan sejumlah tema untuk digunakan oleh perusahaan anda sebagai template sesuai permintaan, anda dapat menyertakan semuanya sebagai kumpulan dalam file LESS yang sama dan gunakanlah yang anda butuhkan.

#fw_1 {        
	p {
		margin: 12px 0;     
	}  
	a { 
		color:blue;
		text-decoration: none;
	} 
	.submit { 
		background: red;
		color: white;
		padding:5px 12px;
	}
}

#fw_2 { 
	p {
		margin: 8px 0;      
	}    
	a { 
		color:red;
		text-decoration: underline; 
	}
	.submit {
		background: blue;
		color: white;
		padding:8px 20px;
	}
}
.submit_button {
	#fw_2 > .submit;
}

Interpolasi String

Interpolasi string hanyalah kata mewah yang berarti bahwa string sewenang-wenang dapat disimpan dalam variabel dan kemudian digunakan di dalam nilai properti.

1	@url: "http://mycompany.com/assets/";background-image: url("@{url}/sprite.png");

Hal di atas bisa sangat membantu saat membuat kerangka kerja tersentralisasi dan memastikan sumber daya diperoleh dari tempat yang benar.

Escaping

Dalam beberapa kasus anda perlu menggunakan properti atau nilai CSS yang tidak valid (aturan IE siapa saja?). Anda mungkin telah memperhatikan contoh gradien kami bahwa saya tidak melayani pengguna Internet Explorer.

Jika anda ingin membuat gradien di IE, anda perlu melakukan sesuatu seperti ini:

1	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444');

CSS diatas tidak valid sehingga proses LESS tidak akan bisa lengkap. Berkaitan dengan ini, anda bisa lolos dari nilai ini yang akan membuat LESS melewatinya dan melanjutkan. Hasil dari ini adalah bahwa ia akan menjadi output ke CSS anda tanpa pengolahan apapun.

1	.button {
2	background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
3	background: -moz-linear-gradient(top, #666666, @color - #444444);
4	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#444444')";}

Yang perlu anda lakukan adalah memasukkan bagian itu dengan tanda petik dan taktik pada karakter tilde di depannya. Bagian ini tidak akan melewati prosesor LESS sehingga kita tidak akan membuangnya.

Pengimporan

Sama seperti dengan CSS bias, anda bisa mengimpor file. Less memungkinkan anda mengimpor file CSS dan LESS dengan sintaks berikut:

1	@import "reset.min.css";
2	@import "framework.less";
3	@import "widgets";

Impor pertama cukup jelas. Ia akan mengimpor aturan-aturan CSS yang didefinisikan di reset.min.css tanpa menjalankannya melalui parser LESS.

Impor kedua akan menarik isi framework.less dan memprosesnya seperti aturan LESS lainnya.

Impor ketiga pada dasarnya sama dengan yang kedua. Jika ekstensi tidak diberikan, LESS menganggapnya sebagai file LESS.

Komentar

Seperti yang diharapkan, komentar multi-baris tersedia dalam LESS dengan cara yang sama seperti penggunaannya di CSS. Selain itu, LESS memungkinkan komentar single line untuk digunakan seperti di PHP; dengan menggunakan garis miring ganda.

/*
	This is my main LESS file.          
	It governs how most of the site looks.
*/      
body {              
	padding:0px; // This resets the body padding 
}

Apa yang Hilang?

Meskipun LESS benar-benar mengagumkan, anda akan menemukan beberapa kekurangan ketika anda mulai menggunakannya walaupun ini tidak terlalu mengganggu. Salah satu fitur yang saya ingin lihat adalah pre-pre-processing (saya setuju, ini tidak masuk akal).

Ingat bagaimana garis bisa dilepaskan sehingga tidak berjalan melalui parser? Karena cara saat LESS menangani berbagai hal saat ini, kita tidak dapat benar-benar menggunakan gradien dengan nama warna yang bervariasi.

1	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20')";

Pekerjaan di atas baik-baik saja tapi warnanya harus sulit dikodekan. Karena jalurnya luput, variabel tidak diproses. Akan menyenangkan jika ada pilihan di mana string yang ditunjukkan dilepas namun variabel ini diproses sebelum output dikirim ke file CSS.

Fitur lain yang saya ingin lihat diimplementasikan adalah penamaan variabel dari penyeleksi dan elemen lainnya, bukan hanya nilai. Ketika kami melihat ruang nama, kami menggunakan sesuatu seperti berikut untuk menambahkan aturan.

1	a {
2	#my_framework > .link
3	}

Akan lebih bagus lagi jika kita bisa melakukan ini seperti ini:

1	@framework: "#my_framework";
2	a {
3	@{framework} > .link
4	}

Hal ini akan memungkinkan saya menambahkan semua kerangka kerja saya ke file LESS tunggal dan kemudian memilihnya dengan hanya mengubah nilai variabel.

Ada sangat sedikit bug dan beberapa kekurangan lainnya tapi secara keseluruhan, LESS sangat bermanfaat dan sangat stabil.

Kesimpulan

Seperti semua teknologi dan metodologi baru, ada keinginan untuk menggunakan secara berlebihan. Ingat logo reflektif di awal era Web 2.0?

Anda tidak perlu menggunakan semua pengaturan anda, anda tidak perlu membuat variabel untuk segala hal dan mixin untuk lebar pembatas sederhana.

Jika anda tidak tahu kapan untuk tidak menggunakan kekuatan LESS yang mengagumkan itu, kode LESS anda akan menjadi sama tak terbaca seperti CSS biasa dan sama sulitnya untuk mempertahankannya. Triknya adalah dengan mengetahui kapan harus memanfaatkan fungsi dan metode yang diberikan dan kapan CSS lama biasa itu menjadi yang terbaik.

Selain itu saya menyarankan agar tidak menggunakan LESS dalam produksi. Tidak ada yang salah dengan itu tapi tidak ada alasan untuk memuat file LESS dan naskah untuk mengolahnya. Padahal naskahnya sangat cepat tapi saya yakin itu tidak lebih cepat daripada tidak memilikinya di sana. Saya biasanya mengembangkan semua situs web saya dengan LESS dan saya bahagia ketika saya meraih hasilnya, mengecilkannya dan menggunakannya dalam file CSS biasa.