น้อย
ออกแบบโดย	อเล็กซิส เซลลิเยร์
นักพัฒนา	อเล็กซิส เซลเลอร์, มิทรี ฟาเดเยฟ
ปรากฏครั้งแรก	2009 ( 2009 )
เวอร์ชันเสถียร	4.6.7 [ 1 ]  / 22 มิถุนายน 2026 ( 22 มิถุนายน 2569 )
วินัยในการพิมพ์	พลวัต
ภาษาการใช้งาน	โค้ด JavaScript
โอเอส	ข้ามแพลตฟอร์ม
ใบอนุญาต	ใบอนุญาต Apache 2.0
นามสกุลไฟล์	.น้อย
เว็บไซต์	lesscss .org
ได้รับอิทธิพลจาก
CSS , Sass
ได้รับอิทธิพล
Sass , Less Framework, Bootstrap (v3)

Less ( Leaner Style Sheets ; บางครั้งเขียนเป็นLESS ) เป็นภาษาสไตล์ชีตพรีโปรเซสเซอร์ แบบไดนามิก ที่สามารถคอมไพล์เป็นCascading Style Sheets (CSS) และทำงานบนฝั่งไคลเอ็นต์หรือฝั่งเซิร์ฟเวอร์ได้^{[ 2 ]} Less ออกแบบโดย Alexis Sellier ได้รับอิทธิพลจากSassและมีอิทธิพลต่อไวยากรณ์ "SCSS" รุ่นใหม่ของ Sass ซึ่งปรับใช้ไวยากรณ์การจัดรูปแบบบล็อกที่คล้ายกับ CSS ^{[ 3 ]} Less เป็น โครงการ โอเพ นซอร์ส เวอร์ชันแรกเขียนด้วยRubyอย่างไรก็ตาม ในเวอร์ชันต่อมา การใช้ Ruby ถูกยกเลิกและแทนที่ด้วยJavaScriptไวยากรณ์การเยื้องของ Less เป็นเมตาภาษาแบบซ้อนกัน เนื่องจาก CSS ที่ถูกต้องคือโค้ด Less ที่ ถูกต้องด้วย ความหมายเดียวกันLess มีกลไกต่อไปนี้: ตัวแปร การซ้อนมิกซ์อิน ตัวดำเนินการและฟังก์ชัน ความแตกต่างหลักระหว่าง Less กับพรีคอมไพเลอ ร์ CSS อื่นๆ คือ Less อนุญาตให้คอมไพล์แบบเรียลไทม์ผ่าน less.js โดยเบราว์เซอร์^{[ 2 ] [ 4 ]}

Lessอนุญาตให้กำหนดตัวแปรได้ โดยกำหนดตัวแปรด้วยเครื่องหมาย @ และ กำหนด ค่าให้ กับตัวแปร ด้วยเครื่องหมายโคลอน (:)

ระหว่างการแปล ค่าของตัวแปรจะถูกแทรกเข้าไปในเอกสาร CSS เอาต์พุต^{[ 2 ]}

@pale -green-color : # 4D926F ;# header { color : @ pale-green-color ; } h2 { color : @ pale-green-color ; }

โค้ดด้านบนใน Less จะถูกแปลงเป็นโค้ด CSS ดังต่อไปนี้

# header { color : #4D926F ; } h2 { color : #4D926F ; }

Mixins ช่วยให้สามารถฝังคุณสมบัติทั้งหมดของคลาสหนึ่งลงในอีกคลาสหนึ่งได้โดยการรวมชื่อคลาสเป็นหนึ่งในคุณสมบัติ ทำให้ทำหน้าที่เหมือนค่าคงที่หรือตัวแปร นอกจากนี้ยังสามารถทำหน้าที่เหมือนฟังก์ชันและรับอาร์กิวเมนต์ได้ CSS ไม่รองรับ Mixins: โค้ดที่ซ้ำกันจะต้องซ้ำกันในแต่ละตำแหน่ง Mixins ช่วยให้การทำซ้ำโค้ดมีประสิทธิภาพและสะอาดมากขึ้น รวมถึงการแก้ไขโค้ดได้ง่ายขึ้น^{[ 2 ]}

.rounded -corners ( @radius : 5px 10px 8px 2px ) { -webkit- border-radius : @radius ; -moz- border -radius : @radius ; border - radius : @radius ; }# ส่วนหัว{ .rounded-corners ; } # ส่วนท้าย{ .rounded-corners(10px 25px 35px 0px) ; }

โค้ดด้านบนใน Less จะถูกแปลงเป็นโค้ด CSS ดังต่อไปนี้:

#header { -webkit - border - radius : 5px 10px 8px 2px ; -moz - border - radius : 5px 10px 8px 2px ; border - radius : 5px 10px 8px 2px ; } #footer { -webkit - border - radius : 10px 25px 35px 0px ; -moz - border - radius : 10px 25px 35px 0px ; border - radius : 10px 25px 35px 0px ; }​​​​​​​​​​

Less มีชุดกฎพิเศษประเภทหนึ่งที่เรียกว่า parametric mixins ซึ่งสามารถผสมผสานได้เหมือนกับคลาส แต่รับค่าพารามิเตอร์ได้

# header { h1 { font-size : 26 px ; font-weight : bold ; } p { font-size : 16 px ; a { text-decoration : none ; color : red ; &:hover { border-width : 1 px ; color : #fff ; } } } }

โค้ดด้านบนใน Less จะถูกแปลงเป็นโค้ด CSS ดังต่อไปนี้:

#header h1 { font -size : 26px ; font-weight : bold ; } #header p { font - size : 16px ; } #header p a { text - decoration : none ; color : red ; } #header p a : hover { border - width : 1px ; color : #fff ; }

Less อนุญาตให้ดำเนินการและใช้งานฟังก์ชันได้ การดำเนินการอนุญาตให้บวก ลบ หาร และคูณค่าคุณสมบัติและสี ซึ่งสามารถใช้สร้างความสัมพันธ์ที่ซับซ้อนระหว่างคุณสมบัติได้ ฟังก์ชันจะจับคู่แบบหนึ่งต่อหนึ่งกับโค้ด JavaScript ทำให้สามารถจัดการค่าต่างๆ ได้

@the -border : 1px ; @base -color : # 111 ; @red : # 842210 ;# ส่วนหัว{ สี: @ base-color * 3 ; ขอบซ้าย: @ the-border ; ขอบขวา: @ the-border * 3 ; } # ส่วนท้าย{ สี: @ base-color + #003300 ; สีขอบ: ลดความอิ่มตัว( @red , 10 % ) ; }

โค้ดด้านบนใน Less จะถูกแปลงเป็นโค้ด CSS ดังต่อไปนี้:

# ส่วนหัว{ สี: #333 ; ขอบซ้าย: 1 พิกเซล; ขอบขวา: 3 พิกเซล; } # ส่วนท้าย{ สี: #114411 ; สีขอบ: #7d2717 ; }

ทั้งSassและ Less เป็นตัวประมวลผล CSS ล่วงหน้า ซึ่งช่วยให้สามารถเขียน CSS ที่สะอาดตาในโครงสร้างการเขียนโปรแกรมแทนที่จะใช้กฎคงที่^{[ 5 ]}

Less ได้รับแรงบันดาลใจจาก Sass ^{[ 6 ] [ 3 ]} Sass ได้รับการออกแบบมาเพื่อทำให้ CSS ง่ายขึ้นและขยายขอบเขตการใช้งาน ดังนั้นสิ่งต่างๆ เช่น วงเล็บปีกกาจึงถูกลบออกจากไวยากรณ์ Less ได้รับการออกแบบให้ใกล้เคียงกับ CSS มากที่สุดเท่าที่จะเป็นไปได้ และด้วยเหตุนี้ CSS ที่มีอยู่จึงสามารถใช้เป็นโค้ด Less ที่ถูกต้องได้^{[ 7 ]}

Sass เวอร์ชันใหม่กว่ายังได้แนะนำไวยากรณ์ที่คล้ายกับ CSS ที่เรียกว่า SCSS (Sassy CSS)

สามารถนำ Less ไปใช้กับเว็บไซต์ได้หลายวิธี วิธีหนึ่งคือการรวม ไฟล์ JavaScript less.js เพื่อแปลงโค้ดแบบเรียลไทม์ จากนั้นเบราว์เซอร์จะแสดงผล CSS ที่ได้ อีกวิธีหนึ่งคือการแปลงโค้ด Less เป็น CSS บริสุทธิ์ แล้วอัปโหลด CSS นั้นไปยังเว็บไซต์ ด้วยวิธีนี้ จะไม่มีการอัปโหลดไฟล์ .less และเว็บไซต์ไม่จำเป็นต้องใช้ตัวแปลง JavaScript less.js

• Sass (ภาษาสำหรับกำหนดรูปแบบไฟล์)
• สไตลัส (ภาษาชีตสไตล์)

• เว็บไซต์อย่างเป็นทางการ