LESS CSS จะช่วยนำเทคนิคในภาษา Programming เข้ามาร่วมในการเขียน CSS ซึ่งจะทำให้โค้ดที่เราเขียนเป็นระเบียบ และนำมาใช้ใหม่ได้ง่ายขึ้น

<div id="page">
	<ul>
		<li class="active">link 1</li>
	</ul>
	<ul>
	 	<li>link 2</li>
	</ul>
</div>

เขียน css แบบ LESS

#page {
    padding: 10px;
    text-align: center;
    ul {
        margin: 4px;
        font-size: 14px;
        li {
            color: #ffcc00;
		&.active {
                background-color: ccc;
                padding: 5px;
            }
        }
    }
}

#header { color: #7d2717; }
h2 { color: #7d2717; }
footer h3 { color: #7d2717; }

แบบ LESS

@maincolor: #7d2717;
#header { color: @maincolor; }
h2 { color: @maincolor; }
footer h3 { color: @maincolor; }

เทคนิคแรกของ LESS CSS คือการ กำหนดตัวแปร
บรรทัดแรกเขียนว่า @maincolor: #7d2717; เวลาจะเรียกใช้ตัวแปรนี้ก็แค่เขียน @maincolor ในตำแหน่งที่ต้องการเรียกใช้ก็พอ
เวลาจะแก้สีแค่เปลี่ยน #7d2717 ในบรรทัดแรกเป็นค่าอื่น สีทั้งเว็บก็จะเปลี่ยนตาม