น้อย - คู่มือฉบับย่อ
LESS เป็นตัวประมวลผลล่วงหน้า CSS ที่เปิดใช้งานสไตล์ชีตที่ปรับแต่งได้จัดการและนำกลับมาใช้ใหม่ได้สำหรับเว็บไซต์ LESS เป็นภาษาสไตล์ชีตไดนามิกที่ขยายความสามารถของ CSS LESS ยังเป็นมิตรกับเบราว์เซอร์ข้าม
CSS Preprocessor เป็นภาษาสคริปต์ที่ขยาย CSS และรวบรวมเป็นไวยากรณ์ CSS ปกติเพื่อให้เว็บเบราว์เซอร์ของคุณอ่านได้ มันมีฟังก์ชันเช่นตัวแปร , ฟังก์ชั่น , mixinsและการดำเนินงานที่ช่วยให้คุณสามารถสร้าง CSS แบบไดนามิก
ทำไมน้อยกว่า?
ตอนนี้ให้เราเข้าใจว่าเหตุใดเราจึงใช้ LESS
LESS รองรับการสร้าง CSS ที่สะอาดกว่าและใช้งานข้ามเบราว์เซอร์ได้เร็วและง่ายขึ้น
LESS ได้รับการออกแบบใน JavaScript และยังสร้างขึ้นเพื่อใช้ในการถ่ายทอดสดซึ่งรวบรวมได้เร็วกว่าตัวประมวลผลล่วงหน้า CSS อื่น ๆ
LESS ช่วยให้โค้ดของคุณอยู่ในรูปแบบโมดูลาร์ซึ่งมีความสำคัญมากโดยทำให้อ่านง่ายและเปลี่ยนแปลงได้ง่าย
การบำรุงรักษาได้เร็วขึ้นสามารถทำได้โดยการใช้น้อยตัวแปร
ประวัติศาสตร์
LESS ออกแบบโดย Alexis Sellierในปี 2009 LESS เป็นโอเพ่นซอร์ส รุ่นแรกของ LESS เขียนด้วย Ruby; ในเวอร์ชันหลัง ๆ การใช้ Ruby ถูกแทนที่ด้วย JavaScript
คุณสมบัติ
สามารถเขียนโค้ดที่สะอาดและอ่านง่ายขึ้นอย่างเป็นระบบ
เราสามารถกำหนดรูปแบบและสามารถใช้ซ้ำได้ตลอดทั้งรหัส
LESS ใช้ JavaScript และเป็นชุด CSS ขั้นสูง
LESS เป็นเครื่องมือที่มีความว่องไวในการแยกแยะปัญหาความซ้ำซ้อนของโค้ด
ข้อดี
LESS สร้าง CSS ที่ทำงานบนเบราว์เซอร์ได้อย่างง่ายดาย
LESS ช่วยให้คุณเขียนโค้ดได้ดีขึ้นและมีการจัดระเบียบอย่างดีโดยใช้การซ้อนกัน
การบำรุงรักษาสามารถทำได้เร็วขึ้นโดยใช้ตัวแปร
LESS ช่วยให้คุณสามารถใช้ซ้ำทั้งชั้นเรียนได้อย่างง่ายดายโดยอ้างถึงในชุดกฎของคุณ
LESS ให้การใช้งานที่ทำให้การเข้ารหัสเร็วขึ้นและประหยัดเวลา
ข้อเสีย
ต้องใช้เวลาในการเรียนรู้ว่าคุณยังใหม่กับการประมวลผลล่วงหน้า CSS หรือไม่
เนื่องจากการเชื่อมต่อที่แน่นหนาระหว่างโมดูลควรใช้ความพยายามมากขึ้นในการใช้ซ้ำและ / หรือทดสอบโมดูลที่ขึ้นอยู่กับ
น้อยมีกรอบน้อยเมื่อเทียบกับ preprocessor เก่าเช่น SASS ซึ่งประกอบด้วยกรอบเข็มทิศ , แรงโน้มถ่วงและSusy
ในบทนี้เราจะเข้าใจวิธีการติดตั้ง LESS แบบทีละขั้นตอน
ข้อกำหนดของระบบสำหรับ LESS
Operating System - ข้ามแพลตฟอร์ม
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari
การติดตั้ง LESS
ตอนนี้ให้เราเข้าใจการติดตั้ง LESS
Step 1 - เราต้องการ NodeJsเพื่อเรียกใช้ LESS ตัวอย่าง หากต้องการดาวน์โหลด NodeJs ให้เปิดลิงก์https://nodejs.org/en/คุณจะเห็นหน้าจอดังที่แสดงด้านล่าง -
dowload คุณสมบัติล่าสุดรุ่นของแฟ้มซิป
Step 2- เรียกใช้การตั้งค่าเพื่อติดตั้งNode.jsบนระบบของคุณ
Step 3- ถัดไปติดตั้ง LESS บนเซิร์ฟเวอร์ผ่าน NPM (Node Package Manager) รันคำสั่งต่อไปนี้ในพรอมต์คำสั่ง
npm install -g less
Step 4 - หลังจากติดตั้ง LESS สำเร็จคุณจะเห็นบรรทัดต่อไปนี้บนพรอมต์คำสั่ง -
`-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
`-- [email protected]
ตัวอย่าง
ต่อไปนี้เป็นตัวอย่างง่ายๆของ LESS
hello.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Hello!!!!!</h3>
</body>
</html>
ให้เราสร้างไฟล์style.lessซึ่งค่อนข้างคล้ายกับ CSS ที่แตกต่างก็คือว่ามันจะถูกบันทึกไว้ด้วย.lessขยาย ควรสร้างทั้งไฟล์. htmlและ. lessภายในโฟลเดอร์nodejs.
style.less
@primarycolor: #FF7F50;
@color:#800080;
h1 {
color: @primarycolor;
}
h3 {
color: @color;
}
คอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
เมื่อคุณเรียกใช้คำสั่งดังกล่าวจะสร้างไฟล์ style.cssโดยอัตโนมัติ เมื่อใดก็ตามที่คุณเปลี่ยนไฟล์ LESS จำเป็นต้องเรียกใช้คำสั่งด้านบนในไฟล์cmdจากนั้นไฟล์ style.cssจะได้รับการอัปเดต
style.cssไฟล์จะมีรหัสต่อไปนี้เมื่อคุณเรียกใช้คำสั่งดังกล่าว -
style.css
h1 {
color: #FF7F50;
}
h3 {
color: #800080;
}
เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ hello.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
เป็นกลุ่มของคุณสมบัติ CSS ที่อนุญาตให้ใช้คุณสมบัติของคลาสหนึ่งในคลาสอื่นและรวมชื่อคลาสเป็นคุณสมบัติ ใน LESS คุณสามารถประกาศ mixin ในลักษณะเดียวกับสไตล์ CSS โดยใช้ class หรือ id selector สามารถเก็บค่าได้หลายค่าและสามารถใช้ซ้ำในรหัสได้ทุกเมื่อที่จำเป็น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้กฎที่ซ้อนกันในไฟล์ LESS -
<html>
<head>
<title>Nested Rules</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class = "myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
.container {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
.myclass {
h1 {
font-size: 25px;
color:#E45456;
}
p {
font-size: 25px;
color:#3C7949;
}
}
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ nested_rules.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
คุณสามารถซ้อนคำสั่งเช่นสื่อและคีย์เฟรมในลักษณะเดียวกันกับวิธีที่คุณซ้อนตัวเลือก คุณสามารถวางคำสั่งไว้ด้านบนและองค์ประกอบสัมพัทธ์จะไม่ถูกเปลี่ยนแปลงภายในชุดกฎ สิ่งนี้เรียกว่ากระบวนการทำให้เป็นฟอง
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คำสั่งที่ซ้อนกันและการทำฟองในไฟล์ LESS -
<html>
<head>
<title>Nested Directives</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
ถัดไปสร้างไฟล์style.less
style.less
.myclass {
@media screen {
color: blue;
@media (min-width: 1024px) {
color: green;
}
}
@media mytext {
color: black;
}
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
@media screen {
.myclass {
color: blue;
}
}
@media screen and (min-width: 1024px) {
.myclass {
color: green;
}
}
@media mytext {
.myclass {
color: black;
}
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ nested_directives_bubbling.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
LESS ให้การสนับสนุนสำหรับการคำนวณทางคณิตศาสตร์บางอย่างเช่นบวก (+) ลบ (-) การคูณ (*) และการหาร (/) และสามารถทำงานกับตัวเลขสีหรือตัวแปรใดก็ได้ การดำเนินการช่วยประหยัดเวลาได้มากเมื่อคุณใช้ตัวแปรและคุณรู้สึกอยากทำงานคณิตศาสตร์ง่ายๆ
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การดำเนินการในไฟล์ LESS -
<html>
<head>
<title>Less Operations</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Operations</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
ถัดไปสร้างไฟล์style.less
style.less
@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.myclass {
font-size: 20px;
color: green;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ operations.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
สร้างตัวเลือกแบบไดนามิกและใช้คุณสมบัติหรือค่าตัวแปรเป็นสตริงที่กำหนดเอง
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ Escape ในไฟล์ LESS -
<html>
<head>
<title>Less Escaping</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Escaping</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
p {
color: ~"green";
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งด้านบนมันจะสร้างไฟล์ style.css โดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
p {
color: green;
}
สิ่งที่เขียนภายใน~ "some_text"จะแสดงเป็นsome_textหลังจากรวบรวมโค้ด LESS เป็นโค้ด CSS
เอาต์พุต
ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ escaping.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
LESS แมปโค้ด JavaScript ด้วยการจัดการค่าและใช้ฟังก์ชันที่กำหนดไว้ล่วงหน้าเพื่อจัดการองค์ประกอบ HTML ในสไตล์ชีต มีฟังก์ชั่นต่างๆในการปรับแต่งสีเช่นฟังก์ชันกลมฟังก์ชันพื้นฟังก์ชันเพดานฟังก์ชันเปอร์เซ็นต์เป็นต้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ฟังก์ชันในไฟล์ LESS -
<html>
<head>
<title>Less Functions</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Functions</h1>
<p class = "mycolor">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
@color: #FF8000;
@width:1.0;
.mycolor {
color: @color;
width: percentage(@width);
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ตอนนี้ดำเนินการคำสั่งด้านบน มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.mycolor {
color: #FF8000;
width: 100%;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ functions.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ซึ่งแสดงขึ้นคุณจะได้รับผลลัพธ์ต่อไปนี้
คำอธิบาย
เนมสเปซใช้เพื่อจัดกลุ่มมิกซ์อินภายใต้ชื่อสามัญ การใช้เนมสเปซคุณสามารถหลีกเลี่ยงความขัดแย้งในชื่อและห่อหุ้มกลุ่มมิกซ์อินจากภายนอกได้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เนมสเปซและตัวเข้าถึงในไฟล์ LESS -
<html>
<head>
<title>Less Namespaces and Accessors</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Namespaces and Accessors</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
.class1 {
.class2 {
.val(@param) {
font-size: @param;
color:green;
}
}
}
.myclass {
.class1 > .class2 > .val(20px);
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.myclass {
font-size: 20px;
color: green;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ namespaces_accessors.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
ขอบเขตตัวแปรระบุตำแหน่งของตัวแปรที่มี ตัวแปรจะถูกค้นหาจากขอบเขตโลคัลและหากไม่พร้อมใช้งานคอมไพลเลอร์จะค้นหาจากขอบเขตหลัก
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้เนมสเปซและตัวเข้าถึงในไฟล์ LESS -
<html>
<head>
<title>Less Scope</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Scope</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.myclass {
font-size: 20px;
color: green;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ scope.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
ความคิดเห็นทำให้รหัสชัดเจนและเข้าใจได้สำหรับผู้ใช้ คุณสามารถใช้ได้ทั้งสไตล์บล็อกและความคิดเห็นแบบอินไลน์ในโค้ด แต่เมื่อคุณรวบรวมโค้ด LESS ความคิดเห็นบรรทัดเดียวจะไม่ปรากฏในไฟล์ CSS
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ความคิดเห็นในไฟล์ LESS -
<html>
<head>
<title>Less Comments</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Comments</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
/* It displays the
green color! */
.myclass {
color: green;
}
// It displays the blue color
.myclass1 {
color: red;
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ตอนนี้ดำเนินการคำสั่งด้านบน มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
/* It displays the
green color! */
.myclass {
color: green;
}
.myclass1 {
color: red;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ comments.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
ใช้เพื่อนำเข้าเนื้อหาของไฟล์ LESS หรือ CSS
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การนำเข้าในไฟล์ LESS -
<html>
<head>
<title>Less Importing</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<h1>Example using Importing</h1>
<p class = "myclass">LESS enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "myclass1">It allows reusing CSS code and
writing LESS code with same semantics.</p>
<p class = "myclass2">LESS supports creating cleaner,
cross-browser friendly CSS faster and easier.</p>
</body>
</html>
ตอนนี้สร้างไฟล์myfile.less
myfile.less
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
ตอนนี้สร้างไฟล์style.less
style.less
@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
color: #FF0000;
}
myfile.lessไฟล์ซึ่งจะถูกนำเข้ามาในstyle.lessจากเส้นทางhttps://www.tutorialspoint.com/less/myfile.less
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ importing.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ในบทนี้เราจะพูดถึงตัวแปรใน LESS LESS อนุญาตให้กำหนดตัวแปรด้วยสัญลักษณ์ @ การกำหนดตัวแปรทำได้ด้วยcolon(:).
ตารางต่อไปนี้แสดงการใช้ตัวแปร LESS โดยละเอียด
ซีเนียร์ | การใช้งานตัวแปรและคำอธิบาย |
---|---|
1 | ภาพรวม การซ้ำซ้อนของค่าเดียวกันหลายครั้งสามารถหลีกเลี่ยงได้โดยการใช้งานของตัวแปร |
2 | การแก้ไขตัวแปร ตัวแปรนี้ยังสามารถนำมาใช้ในสถานที่อื่น ๆ เช่นชื่อตัวเลือก , ชื่อคุณสมบัติ , URLและ@importงบ |
3 | ชื่อตัวแปร เราสามารถกำหนดตัวแปรด้วยชื่อตัวแปรที่ประกอบด้วยค่า |
4 | ขี้เกียจโหลด ในการโหลดแบบขี้เกียจสามารถใช้ตัวแปรได้แม้ว่าจะไม่เป็นเช่นนั้นก็ตาม |
5 | ตัวแปรเริ่มต้น ตัวแปรเริ่มต้นมีความสามารถในการตั้งค่าตัวแปรก็ต่อเมื่อยังไม่ได้ตั้งค่า ไม่จำเป็นต้องใช้คุณลักษณะนี้เนื่องจากสามารถแทนที่ตัวแปรได้อย่างง่ายดายโดยการกำหนดตัวแปรในภายหลัง |
Extend เป็นคลาสหลอกน้อยซึ่งขยายรูปแบบตัวเลือกอื่น ๆ ในตัวเลือกเดียวโดยใช้ :extend ตัวเลือก
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การขยายในไฟล์ LESS -
expand_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<p>Hello!!!!!</p>
</div>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
h2 {
&:extend(.style);
font-style: italic;
}
.style {
background: green;
}
คุณสามารถรวบรวมextend.lessไฟล์extend.cssโดยใช้คำสั่งดังต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
h2 {
font-style: italic;
}
.style,
h2 {
background: blue;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ extend_syntax.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ขยายไวยากรณ์
Extend ถูกวางไว้ในชุดกฎหรือแนบกับตัวเลือก คล้ายกับคลาสหลอกที่มีหนึ่งคลาสขึ้นไปซึ่งคั่นด้วยลูกน้ำ ใช้คีย์เวิร์ดที่ไม่บังคับallสามารถติดตามตัวเลือกแต่ละรายการได้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไวยากรณ์ส่วนขยายในไฟล์ LESS -
expand_syntax.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "style">
<h2>Welcome to TutorialsPoint</h2>
<div class = "container">
<p>Hello!!!!!</p>
</div>
</div>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
.style:extend(.container, .img) {
background: #BF70A5;
}
.container {
font-style: italic;
}
.img {
font-size: 30px;
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.style {
background: #BF70A5;
}
.container,
.style {
font-style: italic;
}
.img,
.style {
font-size: 30px;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ extend_syntax.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ตารางต่อไปนี้แสดงประเภทของไวยากรณ์ส่วนขยายทั้งหมดที่คุณสามารถใช้ได้ใน LESS -
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | ขยายสิ่งที่แนบมากับตัวเลือก Extend เชื่อมต่อกับตัวเลือกซึ่งมีลักษณะคล้ายกับคลาสหลอกโดยมีตัวเลือกเป็นพารามิเตอร์ |
2 | ขยายชุดกฎภายใน &:extend(selector) ไวยากรณ์สามารถใส่ไว้ในเนื้อความของชุดกฎ |
3 | การขยายตัวเลือกที่ซ้อนกัน ตัวเลือกที่ซ้อนกันจะจับคู่โดยใช้ตัวเลือกขยาย |
4 | การจับคู่ที่แน่นอนกับ Extend โดยค่าเริ่มต้น, extend ค้นหาการจับคู่ที่ตรงกันระหว่างตัวเลือก |
5 | นิพจน์ที่ n รูปแบบของนิพจน์ที่ n มีความสำคัญในการขยายมิฉะนั้นถือว่าตัวเลือกต่างกัน |
6 | ขยาย "ทั้งหมด" เมื่อคำหลักทั้งหมดถูกระบุในที่สุดในextend อาร์กิวเมนต์จากนั้น LESS จะจับคู่ตัวเลือกนั้นเป็นส่วนหนึ่งของตัวเลือกอื่น |
7 | Selector Interpolation with Extend extend สามารถเชื่อมต่อกับตัวเลือก interpolated |
8 | กำหนดขอบเขต / ขยายด้านใน @media ขยายตรงกับตัวเลือกเฉพาะที่มีอยู่ในการประกาศสื่อเดียวกัน |
9 | การตรวจจับการทำซ้ำ ไม่สามารถตรวจพบการซ้ำกันของตัวเลือก |
ต่อไปนี้เป็นประเภทของ Use Cases for Extend
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | กรณีการใช้งานแบบคลาสสิก กรณีการใช้งานแบบคลาสสิกใช้เพื่อหลีกเลี่ยงการเพิ่มคลาสพื้นฐานใน LESS |
2 | การลดขนาด CSS Extend ใช้เพื่อย้ายตัวเลือกไปให้ไกลที่สุดเท่าที่คุณสมบัติที่คุณต้องการใช้ สิ่งนี้ช่วยในการลดโค้ดที่สร้างโดย css |
3 | การผสมผสานสไตล์ / มิกซ์อินขั้นสูงเพิ่มเติม การใช้การขยายเราสามารถรวมสไตล์เดียวกันของตัวเลือกเฉพาะเข้ากับตัวเลือกอื่น ๆ |
Mixins คล้ายกับฟังก์ชันในภาษาโปรแกรม Mixins คือกลุ่มของคุณสมบัติ CSS ที่อนุญาตให้คุณใช้คุณสมบัติของคลาสหนึ่งสำหรับคลาสอื่นและมีชื่อคลาสเป็นคุณสมบัติ ใน LESS คุณสามารถประกาศ mixin ในลักษณะเดียวกับสไตล์ CSS โดยใช้ class หรือ id selector สามารถเก็บค่าได้หลายค่าและสามารถใช้ซ้ำในรหัสได้ทุกเมื่อที่จำเป็น
ตารางต่อไปนี้แสดงให้เห็นถึงการใช้มิกซ์อินน้อยโดยละเอียด
ซีเนียร์ | การใช้งานและคำอธิบาย Mixins |
---|---|
1 | ไม่เอาท์พุท Mixin คุณสามารถทำให้มิกซ์อินหายไปในเอาต์พุตได้โดยเพียงแค่วางวงเล็บไว้ด้านหลัง |
2 | Selectors ใน Mixins มิกซ์อินสามารถมีคุณสมบัติไม่เพียง แต่ยังมีตัวเลือกได้ด้วย |
3 | เนมสเปซ เนมสเปซใช้เพื่อจัดกลุ่มมิกซ์อินภายใต้ชื่อสามัญ |
4 | Namespaces ที่ได้รับการปกป้อง เมื่อใช้ตัวป้องกันกับเนมสเปซมิกซ์อินที่กำหนดโดยมันจะถูกใช้เฉพาะเมื่อเงื่อนไขการป้องกันคืนค่าเป็นจริง |
5 | คำสำคัญ! ! สำคัญคำหลักที่จะใช้ในการแทนที่คุณสมบัติโดยเฉพาะอย่างยิ่ง |
ตัวอย่าง
ตัวอย่างต่อไปนี้สาธิตการใช้mixinsในไฟล์ LESS -
<html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>LESS Mixins</title>
</head>
<body>
<h1>Welcome to Tutorialspoint</h1>
<p class = "p1">LESS is a CSS pre-processor that enables customizable,
manageable and reusable style sheet for web site.</p>
<p class = "p2">LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<p class = "p3">LESS is cross browser friendly.</p>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
.p1 {
color:red;
}
.p2 {
background : #64d9c0;
.p1();
}
.p3 {
background : #LESS520;
.p1;
}
คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.p1 {
color: red;
}
.p2 {
background: #64d9c0;
color: red;
}
.p3 {
background: #LESS520;
color: red;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ less_mixins.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
วงเล็บเป็นทางเลือกเมื่อเรียกมิกซ์อิน ในตัวอย่างข้างต้นทั้งสองคำสั่ง.p1(); และ .p1; ทำสิ่งเดียวกัน
คำอธิบาย
พาราเมตริกมิกซ์อินใช้พารามิเตอร์อย่างน้อยหนึ่งพารามิเตอร์ที่ขยายการทำงานของ LESS โดยการใช้อาร์กิวเมนต์และคุณสมบัติเพื่อปรับแต่งเอาต์พุตมิกซ์อินเมื่อผสมลงในบล็อกอื่น
ตัวอย่างเช่นพิจารณาข้อมูลโค้ด LESS อย่างง่าย -
.border(@width; @style; @color) {
border: @width @style @color;
}
.myheader {
.border(2px; dashed; green);
}
ที่นี่เรากำลังใช้พาราเมตริกมิกซ์อินเป็น. border ที่มีพารามิเตอร์สามตัวคือความกว้างรูปแบบและสี เมื่อใช้พารามิเตอร์เหล่านี้คุณสามารถปรับแต่งเอาต์พุตมิกซ์อินด้วยค่าพารามิเตอร์ที่ส่งผ่าน
ตารางต่อไปนี้อธิบายประเภทต่างๆของส่วนผสมพาราเมตริกพร้อมกับคำอธิบาย
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | Mixins ที่มีหลายพารามิเตอร์ พารามิเตอร์สามารถแยกได้โดยใช้เครื่องหมายจุลภาคหรืออัฒภาค |
2 | พารามิเตอร์ที่มีชื่อ Mixins ให้ค่าพารามิเตอร์แทนตำแหน่งโดยใช้ชื่อ |
3 | ตัวแปร @arguments เมื่อมีการเรียกมิกซ์อิน @arguments จะรวมอาร์กิวเมนต์ที่ส่งผ่านทั้งหมด |
4 | อาร์กิวเมนต์ขั้นสูงและตัวแปร @rest Mixin รับจำนวนอาร์กิวเมนต์โดยใช้ ..... |
5 | การจับคู่รูปแบบ เปลี่ยนพฤติกรรมของมิกซ์อินโดยส่งผ่านพารามิเตอร์ไป |
ในบทนี้เราจะเข้าใจถึงความสำคัญของ Mixins as Functions. เช่นเดียวกับฟังก์ชัน mixins สามารถซ้อนกันสามารถยอมรับพารามิเตอร์และส่งคืนค่าได้เช่นกัน
ตารางต่อไปนี้แสดงการใช้มิกซ์อินเป็นฟังก์ชันในรายละเอียด
ซีเนียร์ | การใช้งานและคำอธิบาย Mixins |
---|---|
1 | ขอบเขตการผสม ส่วนผสมประกอบด้วยตัวแปร สิ่งเหล่านี้สามารถใช้ในขอบเขตของผู้โทรและมองเห็นได้ |
2 | ผสมและส่งคืนค่า Mixins จะคล้ายกับฟังก์ชันและตัวแปรที่กำหนดไว้ใน mixin จะทำหน้าที่เป็นค่าส่งกลับ |
3 | Mixin ภายใน mixin อื่น เมื่อใดก็ตามที่มีการกำหนดมิกซ์อินภายในมิกซ์อินอื่นก็สามารถใช้เป็นค่าส่งคืนได้เช่นกัน |
คำอธิบาย
ชุดกฎที่แยกออกมีชุดกฎเช่นคุณสมบัติชุดกฎที่ซ้อนกันการประกาศตัวแปรมิกซ์อิน ฯลฯ จะถูกเก็บไว้ในตัวแปรและรวมไว้ในโครงสร้างอื่น คุณสมบัติทั้งหมดของชุดกฎจะถูกคัดลอกไปยังโครงสร้างนั้น
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีการส่งชุดกฎไปยัง mixin ในไฟล์ LESS -
ผ่าน _ruleset.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web.</p>
</div>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
@detached-ruleset: {
.mixin() {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
};
.cont {
@detached-ruleset();
.mixin();
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.cont {
font-family: "Comic Sans MS";
background-color: #AA86EE;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ passing_ruleset.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
การกำหนดขอบเขต
ตัวแปรและมิกซ์อินทั้งหมดในชุดกฎแยกมีอยู่ทุกที่ที่ชุดกฎเรียกหรือกำหนด มิฉะนั้นทั้งขอบเขตผู้โทรและนิยามจะพร้อมใช้งานโดยค่าเริ่มต้น ขอบเขตการประกาศจะมีลำดับความสำคัญเมื่อขอบเขตทั้งสองมีมิกซ์อินหรือตัวแปรเดียวกัน เนื้อหาชุดกฎแยกถูกกำหนดไว้ในขอบเขตการประกาศ จะไม่เปลี่ยนขอบเขตหลังจากที่ชุดกฎแยกถูกคัดลอกจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่ง
ตารางต่อไปนี้แสดงประเภทของขอบเขตทั้งหมด -
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | ความหมายและการมองเห็นขอบเขตผู้โทร ตัวแปรและมิกซ์อินถูกกำหนดไว้ภายในชุดกฎแยก |
2 | การอ้างอิงจะไม่แก้ไขขอบเขตชุดกฎที่แยกออกมา เพียงแค่ให้การอ้างอิงชุดกฎก็ไม่สามารถเข้าถึงขอบเขตใหม่ ๆ ได้ |
3 | การปลดล็อกจะแก้ไขขอบเขตชุดกฎที่แยกออกมา ชุดกฎแยกสามารถเข้าถึงขอบเขตได้โดยการนำเข้า |
คำอธิบาย
@importคำสั่งใช้เพื่อนำเข้าไฟล์ในโค้ด มันแพร่กระจายโค้ด LESS ไปยังไฟล์ต่างๆและช่วยให้สามารถรักษาโครงสร้างของโค้ดได้อย่างง่ายดาย คุณสามารถใส่คำสั่ง@importที่ใดก็ได้ในโค้ด
ตัวอย่างเช่นคุณสามารถนำเข้าไฟล์โดยใช้ @importคำหลัก@import "file_name.less"
นามสกุลไฟล์
คุณสามารถใช้คำสั่ง@importขึ้นอยู่กับนามสกุลไฟล์ต่างๆเช่น -
หากคุณใช้นามสกุล. cssมันจะถือว่าเป็น CSS และคำสั่ง@importจะยังคงอยู่เหมือนเดิม
หากมีนามสกุลอื่นจะถือว่าเป็น LESS และจะถูกนำเข้า
หากไม่มีนามสกุล LESS มันจะต่อท้ายและรวมเป็นไฟล์ LESS ที่นำเข้า
@import "style"; // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php"; // imports the style.php as a less file
@import "style.css"; // it will kept the statement as it is
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวแปรในไฟล์ SCSS -
<!doctype html>
<head>
<title>Import Directives</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Import Directives</h2>
<p class = "myline">Welcome to Tutorialspoint...</p>
</body>
</html>
จากนั้นสร้างไฟล์import_dir.less
import_dir.less
.myline {
font-size: 20px;
}
ตอนนี้สร้างไฟล์style.less
style.less
@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
color:#FF0000;
}
import_dir.lessไฟล์จะได้รับนำเข้ามาในstyle.lessไฟล์จากเส้นทางhttps://www.tutorialspoint.com/less/import_dir.less.
คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.myline {
font-size: 20px;
}
.myline {
color: #FF0000;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ import_directives.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ในบทนี้เราจะเข้าใจถึงความสำคัญของ Import Optionsใน LESS LESS นำเสนอไฟล์@import คำสั่งที่อนุญาตให้สไตล์ชีตนำเข้าทั้งสไตล์ชีต LESS และ CSS
ตารางต่อไปนี้แสดงรายการคำสั่งการนำเข้าที่จะนำไปใช้ในคำสั่งนำเข้า
ซีเนียร์ | นำเข้าตัวเลือกและคำอธิบาย |
---|---|
1 | เอกสารอ้างอิง ใช้ไฟล์ LESS เป็นข้อมูลอ้างอิงเท่านั้นและจะไม่ส่งออก |
2 | อินไลน์ ช่วยให้คุณสามารถคัดลอก CSS ของคุณไปยังเอาต์พุตโดยไม่ต้องประมวลผล |
3 | น้อยกว่า มันจะถือว่าไฟล์ที่นำเข้าเป็นไฟล์ LESS ปกติแม้ว่าจะเป็นนามสกุลไฟล์ก็ตาม |
4 | css มันจะถือว่าไฟล์ที่นำเข้าเป็นไฟล์ CSS ปกติแม้ว่าจะเป็นนามสกุลไฟล์ก็ตาม |
5 | ครั้งเดียว มันจะนำเข้าไฟล์เพียงครั้งเดียว |
6 | หลาย มันจะนำเข้าไฟล์หลายครั้ง |
7 | ไม่จำเป็น คอมไพล์ต่อไปแม้ว่าจะไม่พบไฟล์ที่จะนำเข้าก็ตาม |
อนุญาตให้ใช้คำหลักมากกว่าหนึ่งคำในไฟล์ @import อย่างไรก็ตามคุณต้องใช้เครื่องหมายจุลภาคเพื่อแยกคำหลัก
ตัวอย่างเช่น -
@import (less, optional) "custom.css";
คำอธิบาย
หากคุณต้องการจับคู่ค่าธรรมดาหรือจำนวนอาร์กิวเมนต์ในนิพจน์คุณสามารถใช้ยามได้ มีความเกี่ยวข้องกับการประกาศ mixin และรวมถึงเงื่อนไขที่แนบมากับ mixin มิกซ์อินแต่ละตัวจะมียามหนึ่งคนขึ้นไปซึ่งคั่นด้วยลูกน้ำ ต้องมียามอยู่ในวงเล็บ LESS ใช้มิกซ์อินที่มีการป้องกันแทนif/else คำสั่งและทำการคำนวณเพื่อระบุ mixin ที่ตรงกัน
ตารางต่อไปนี้อธิบายประเภทของการ์ดป้องกันมิกซ์อินประเภทต่างๆพร้อมคำอธิบาย
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | Guard Comparison Operators คุณสามารถใช้ตัวดำเนินการเปรียบเทียบ (=) เพื่อเปรียบเทียบตัวเลขสตริงตัวระบุ ฯลฯ |
2 | Guard Logical Operators คุณสามารถใช้คีย์เวิร์ดและเพื่อหลีกเลี่ยงตัวดำเนินการเชิงตรรกะกับยาม |
3 | พิมพ์ฟังก์ชันการตรวจสอบ ประกอบด้วยฟังก์ชันในตัวเพื่อกำหนดประเภทค่าสำหรับการจับคู่มิกซ์อิน |
4 | ส่วนผสมตามเงื่อนไข LESS ใช้ฟังก์ชันเริ่มต้นเพื่อจับคู่มิกซ์อินกับการจับคู่การผสมอื่น ๆ |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ mixin guards ในไฟล์ LESS -
<!doctype html>
<head>
<title>Mixin Guards</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h2>Example of Mixin Guards</h2>
<p class = "class1">Hello World...</p>
<p class = "class2">Welcome to Tutorialspoint...</p>
</body>
</html>
ตอนนี้สร้างไฟล์style.less
style.less
.mixin (@a) when (lightness(@a) >= 50%) {
font-size: 14px;
}
.mixin (@a) when (lightness(@a) < 50%) {
font-size: 16px;
}
.mixin (@a) {
color: @a;
}
.class1 {
.mixin(#FF0000)
}
.class2 {
.mixin(#555)
}
คุณสามารถรวบรวมstyle.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.class1 {
font-size: 14px;
color: #FF0000;
}
.class2 {
font-size: 16px;
color: #555;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ mixin-guard.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
Guards ใช้เพื่อจับคู่ค่าธรรมดาหรืออาร์กิวเมนต์จำนวนหนึ่งในนิพจน์ ใช้กับตัวเลือก CSS เป็นไวยากรณ์สำหรับการประกาศ mixin และเรียกใช้ทันที เพื่อนำไฟล์ifประเภทคำสั่ง; เข้าร่วมกับคุณลักษณะนี้&ซึ่งช่วยให้คุณจัดกลุ่มผู้คุมได้หลายคน
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ css ป้องกันในไฟล์ LESS -
css_guard.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div class = "style">
<h3>The largest Tutorials Library on the web.</h3>
</div>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
@usedScope: global;
.mixin() {
@usedScope: mixin;
.cont when (@usedScope = global) {
background-color: red;
color: black;
}
.style when (@usedScope = mixin) {
background-color: blue;
color: white;
}
@usedScope: mixin;
}
.mixin();
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
.style {
background-color: blue;
color: white;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ css_guard.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ในบทนี้เราจะเข้าใจวิธีการทำงานของลูปใน LESS คำสั่งลูปช่วยให้เราดำเนินการคำสั่งหรือกลุ่มของคำสั่งได้หลายครั้ง สามารถสร้างโครงสร้างวนซ้ำ / วนซ้ำต่างๆได้เมื่อมิกซ์อินแบบวนซ้ำรวมกับGuard Expressions และ Pattern Matching.
ตัวอย่าง
ตัวอย่างต่อไปนี้สาธิตการใช้ลูปในไฟล์ LESS -
loop_example.htm
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<div class = "cont">
<h2>Welcome to TutorialsPoint</h2>
<p>The largest Tutorials Library on the web. </p>
</div>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
.cont(@count) when (@count > 0) {
.cont((@count - 1));
width: (25px * @count);
}
div {
.cont(7);
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
div {
width: 25px;
width: 50px;
width: 75px;
width: 100px;
width: 125px;
width: 150px;
width: 175px;
}
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ loop_example.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
คำอธิบาย
คุณลักษณะนี้ใน LESS อนุญาตให้เพิ่มค่าลงในรายการที่คั่นด้วยจุลภาคหรือช่องว่างจากคุณสมบัติหลายรายการโดยใช้คุณสมบัติเดียว สามารถใช้สำหรับพื้นหลังและคุณสมบัติการแปลง
ตารางต่อไปนี้อธิบายถึงฟังก์ชันสองประเภทที่คุณลักษณะผสาน
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | จุลภาค เป็นการเพิ่มมูลค่าทรัพย์สินในตอนท้าย |
2 | พื้นที่ เพิ่มมูลค่าทรัพย์สินด้วยช่องว่าง |
ในบทนี้ให้เราเข้าใจวิธีการ Parent Selectorsงาน. เป็นไปได้ที่จะอ้างอิงตัวเลือกหลักโดยใช้&(ampersand) ตัวดำเนินการ ตัวเลือกหลักของกฎที่ซ้อนกันจะแสดงโดย& ตัวดำเนินการและใช้เมื่อใช้คลาสการปรับเปลี่ยนหรือคลาสหลอกกับตัวเลือกที่มีอยู่
ตารางต่อไปนี้แสดงประเภทของตัวเลือกหลัก -
ซีเนียร์ | ประเภทและคำอธิบาย |
---|---|
1 | หลาย & & จะเป็นตัวแทนของตัวเลือกที่ใกล้ที่สุดและตัวเลือกหลักทั้งหมด |
2 | การเปลี่ยนลำดับตัวเลือก การเลือกตัวเลือกล่วงหน้าไปยังตัวเลือกที่สืบทอด (พาเรนต์) มีประโยชน์เมื่อมีการเปลี่ยนแปลงลำดับตัวเลือก |
3 | Combinatorial Explosion & ยังสามารถสร้างการเปลี่ยนแปลงที่เป็นไปได้ทั้งหมดของตัวเลือกในรายการโดยคั่นด้วยเครื่องหมายจุลภาค |
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือกหลักในไฟล์ LESS -
<!doctype html>
<head>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
<title>Parent Selector</title>
</head>
<body>
<h2>Welcome to TutorialsPoint</h2>
<ul>
<li><a>SASS</a></li>
<li><a>LESS</a></li>
</ul>
</body>
</html>
จากนั้นสร้างไฟล์style.less
style.less
a {
color: #5882FA;
&:hover {
background-color: #A9F5F2;
}
}
คุณสามารถคอมไพล์ไฟล์style.lessเป็นstyle.cssโดยใช้คำสั่งต่อไปนี้ -
lessc style.less style.css
ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -
style.css
a {
color: #5882FA;
}
a:hover {
background-color: red;
}
ในตัวอย่างข้างต้น & หมายถึงตัวเลือก a.
เอาต์พุต
ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -
บันทึกรหัส html ด้านบนในไฟล์ parent_selector1.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น
ปกครองเตอร์ผู้ประกอบการมีประโยชน์หลายอย่างเช่นเมื่อคุณต้องการที่จะรวมตัวเลือกกฎซ้อนกันในทางอื่นที่ไม่ใช่ค่าเริ่มต้น การใช้งานทั่วไปอีกประการหนึ่งของ&คือการสร้างชื่อคลาสซ้ำ ๆ สำหรับข้อมูลเพิ่มเติมคลิกที่นี่
ฟังก์ชันอื่น ๆ ประกอบด้วยกลุ่มของฟังก์ชันที่แตกต่างกัน
ตารางต่อไปนี้แสดงรายการฟังก์ชันเบ็ดเตล็ดทุกประเภท -
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย |
---|---|
1 | สี เป็นสตริงที่แสดงถึงสี |
2 | ขนาดรูปภาพ ใช้เพื่อตรวจสอบขนาดของภาพจากไฟล์ |
3 | ภาพ - ความกว้าง ตรวจสอบความกว้างของภาพจากไฟล์ |
4 | ภาพ - ความสูง จะตรวจสอบความสูงของภาพจากไฟล์ |
5 | แปลง จำนวนจะถูกแปลงจากหน่วยหนึ่งไปยังอีกหน่วยหนึ่ง |
6 | ข้อมูล - uri Data uri เป็นสกีมาตัวระบุทรัพยากรที่เหมือนกัน (URI) ซึ่งรับทรัพยากรแบบอินไลน์บนหน้าเว็บ |
7 | ค่าเริ่มต้น ฟังก์ชันเริ่มต้นจะคืนค่าจริงเฉพาะเมื่อพร้อมใช้งานภายในเงื่อนไขการป้องกันและไม่ตรงกับมิกซ์อินอื่น ๆ |
8 | หน่วย ฟังก์ชันเริ่มต้นจะคืนค่าจริงเฉพาะเมื่อพร้อมใช้งานภายในเงื่อนไขการป้องกันและไม่ตรงกับมิกซ์อินอื่น ๆ |
9 | รับ - หน่วย ฟังก์ชัน get - unit จะส่งกลับหน่วยที่อาร์กิวเมนต์แสดงด้วยตัวเลขและหน่วย |
10 | svg - ไล่ระดับสี svg-gradient คือการเปลี่ยนสีหนึ่งไปเป็นอีกสีหนึ่ง สามารถเพิ่มหลายสีให้กับองค์ประกอบเดียวกัน |
คำอธิบาย
Less รองรับฟังก์ชันสตริงบางอย่างตามรายการด้านล่าง -
- escape
- e
- % รูปแบบ
- replace
ตารางต่อไปนี้อธิบายฟังก์ชันสตริงข้างต้นพร้อมกับคำอธิบาย
ซีเนียร์ | ประเภทและคำอธิบาย | ตัวอย่าง |
---|---|---|
1 | Escape มันเข้ารหัสสตริงหรือข้อมูลโดยใช้การเข้ารหัส URL กับอักขระพิเศษ คุณไม่สามารถเข้ารหัสอักขระบางตัวเช่น, , / , ? , @ , & , + , ~ , ! , $ , ' และอักขระบางตัวที่คุณสามารถเข้ารหัสได้เช่น \ , # , ^ , ( , ) , { , } , : , > , < , ] , [ และ =. |
ส่งออกสตริงที่หลีกเลี่ยงเป็น - |
2 | e เป็นฟังก์ชันสตริงที่ใช้สตริงเป็นพารามิเตอร์และส่งกลับข้อมูลโดยไม่มีเครื่องหมายคำพูด มันคือการหลีกเลี่ยง CSS ซึ่งใช้~ "เนื้อหาบางส่วน"ค่าและตัวเลขที่ใช้เป็นพารามิเตอร์ |
ส่งออกสตริงที่หลีกเลี่ยงเป็น - |
3 | % format ฟังก์ชันนี้จัดรูปแบบสตริง สามารถเขียนได้ในรูปแบบต่อไปนี้ - |
เอาต์พุตสตริงที่จัดรูปแบบเป็น - |
4 | replace ใช้เพื่อแทนที่ข้อความภายในสตริง ใช้พารามิเตอร์บางอย่าง -
|
มันแทนที่สตริงเป็น - |
คำอธิบาย
LESS ประกอบด้วยฟังก์ชันรายการที่ใช้เพื่อระบุความยาวของรายการและตำแหน่งของค่าในรายการ
ตารางต่อไปนี้แสดงรายการฟังก์ชันที่ใช้ใน LESS -
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย |
---|---|
1 | ความยาว จะใช้รายการค่าที่คั่นด้วยจุลภาคหรือเว้นวรรคเป็นพารามิเตอร์ |
2 | สารสกัด มันจะส่งคืนค่าในตำแหน่งที่ระบุในรายการ |
คำอธิบาย
ฟังก์ชันทางคณิตศาสตร์ประกอบด้วยวิธีการที่ใช้ในการดำเนินการตัวเลขเช่นรอบรากที่สองค่ากำลังโมดูลัสเปอร์เซ็นต์เป็นต้น
ตารางต่อไปนี้แสดงฟังก์ชันคณิตศาสตร์ที่ใช้ใน LESS -
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย | ตัวอย่าง |
---|---|---|
1 | ceil มันจะปัดเศษขึ้นเป็นจำนวนเต็มสูงสุดถัดไป |
มันปัดเศษเป็น - |
2 | floor มันจะปัดเศษลงเป็นจำนวนเต็มที่ต่ำสุดถัดไป |
มันปัดเศษเป็น - |
3 | percentage มันแปลงตัวเลขทศนิยมเป็นสตริงเปอร์เซ็นต์ |
มันแปลงตัวเลขเป็นสตริงเปอร์เซ็นต์เป็น - |
4 | round มันจะปัดเศษตัวเลขทศนิยม |
มันจะแปลงตัวเลขเป็นค่าการปัดเศษเป็น - |
5 | sqrt มันส่งคืนค่ารากที่สองของตัวเลข |
มันกำหนดรากที่สองของจำนวนเป็น - |
6 | abs ให้ค่าสัมบูรณ์ของตัวเลข |
จะแสดงค่าสัมบูรณ์เป็น - |
7 | sin ส่งคืนเรเดียนของตัวเลข |
มันคำนวณค่าไซน์เป็น - |
8 | asin ระบุ arcsine (ผกผันไซน์) ของตัวเลขที่ส่งกลับค่าระหว่าง -pi / 2 และ pi / 2 |
มันคำนวณค่า asin เป็น - |
9 | cos ส่งคืนโคไซน์ของค่าที่ระบุและกำหนดเรเดียนสำหรับตัวเลขที่ไม่มีหน่วย |
มันคำนวณค่า cos เป็น - |
10 | acos ระบุ arccosine (ผกผันโคไซน์) ของตัวเลขที่ส่งกลับค่าระหว่าง 0 ถึง pi |
มันคำนวณค่า acos เป็น - |
11 | tan มันระบุแทนเจนต์ของจำนวน |
มันคำนวณค่า tan เป็น - |
12 | atan มันระบุอาร์กแทนเจนต์ (ผกผันของแทนเจนต์) ของจำนวนที่ระบุ |
จะแสดงค่า atan เป็น - |
13 | pi ส่งคืนค่า pi |
กำหนดค่า pi เป็น - |
14 | pow ระบุค่าของอาร์กิวเมนต์แรกยกกำลังของอาร์กิวเมนต์ที่สอง |
ระบุค่ากำลังเป็น - |
15 | mod ส่งคืนโมดูลัสของอาร์กิวเมนต์แรกเทียบกับอาร์กิวเมนต์ที่สอง นอกจากนี้ยังจัดการตัวเลขจุดลบและทศนิยม |
จะคืนค่าโมดูลัสเป็น - |
16 | min ระบุค่าที่น้อยที่สุดของอาร์กิวเมนต์ตั้งแต่หนึ่งตัวขึ้นไป |
จะคืนค่าต่ำสุดเป็น - |
17 | max ระบุค่าสูงสุดของอาร์กิวเมนต์ตั้งแต่หนึ่งรายการขึ้นไป |
จะคืนค่าสูงสุดเป็น - |
ในบทนี้เราจะเข้าใจถึงความสำคัญของ Type Functionsใน LESS ใช้เพื่อกำหนดประเภทของค่า
ตารางต่อไปนี้แสดงฟังก์ชัน Type ที่ใช้ใน LESS
ซีเนียร์ | พิมพ์ Functions & Description | ตัวอย่าง |
---|---|---|
1 | isnumber มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าเป็นตัวเลขหรือเท็จอย่างอื่น |
|
2 | isstring มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และส่งกลับจริงถ้ามันเป็นสตริงหรือเท็จอย่างอื่น |
|
3 | iscolor รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็นสีหรือเท็จหากไม่ใช่ |
|
4 | iskeyword รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็นคีย์เวิร์ดหรือเท็จหากไม่ใช่ |
|
5 | isurl รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็น url หรือเท็จหากไม่ใช่ |
|
6 | ispixel มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าค่าเป็นจำนวนพิกเซลหรือเท็จอย่างอื่น |
|
7 | isem รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงหากค่าเป็นค่า em หรือเป็นเท็จหากไม่ใช่ |
|
8 | ispercentage รับค่าเป็นพารามิเตอร์และส่งกลับค่าจริงถ้าค่าเป็นเปอร์เซ็นต์หรือส่งกลับเท็จหากค่าไม่อยู่ในเปอร์เซ็นต์ |
|
9 | isunit จะคืนค่าจริงหากค่าเป็นตัวเลขในหน่วยที่ระบุที่ระบุเป็นพารามิเตอร์หรือจะส่งคืนเป็นเท็จหากค่าไม่ใช่ตัวเลขในหน่วยที่ระบุ |
|
10 | isruleset มันต้องใช้เวลาคุ้มค่าเป็นพารามิเตอร์และผลตอบแทนที่แท้จริงถ้าค่าเป็น ruleset หรือเท็จอย่างอื่น |
|
คำอธิบาย
LESS มีฟังก์ชันสีที่มีประโยชน์มากมายในการปรับเปลี่ยนและปรับแต่งสีในรูปแบบต่างๆ LESS รองรับฟังก์ชันนิยามสีบางอย่างดังแสดงในตารางด้านล่าง -
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย | ตัวอย่าง |
---|---|---|
1 | rgb มันสร้างสีจากค่าสีแดงเขียวและน้ำเงิน มีพารามิเตอร์ดังต่อไปนี้ -
|
มันแปลงสีด้วยค่า rgb เป็น - |
2 | rgba กำหนดสีจากค่าสีแดงสีเขียวสีน้ำเงินและอัลฟา มีพารามิเตอร์ดังต่อไปนี้ -
|
มันแปลงวัตถุสีด้วยค่า rgba เป็น - |
3 | argb มันกำหนดการแสดงสีฐานสิบหกใน #AARRGGBBรูปแบบ. ใช้พารามิเตอร์ต่อไปนี้ -
|
มันคืนค่าสี argb เป็น - |
4 | hsl สร้างสีจากค่าสีความอิ่มตัวและความสว่าง มีพารามิเตอร์ดังต่อไปนี้ -
|
ส่งคืนวัตถุสีโดยใช้ค่า HSL เป็น - |
5 | hsla สร้างสีจากสีความอิ่มตัวความสว่างและค่าอัลฟา มีพารามิเตอร์ดังต่อไปนี้ -
|
ระบุวัตถุสีโดยใช้ค่า HSLA เป็น - |
6 | hsv สร้างสีจากค่าสีความอิ่มตัวและค่า ประกอบด้วยพารามิเตอร์ต่อไปนี้ -
|
มันแปลงวัตถุสีด้วยค่า hsv เป็น - |
7 | hsva สร้างสีจากเฉดสีความอิ่มตัวค่าและค่าอัลฟา ใช้พารามิเตอร์ต่อไปนี้ -
|
มันระบุวัตถุสีด้วยค่า hsva เป็น - |
ในบทนี้เราจะเข้าใจถึงความสำคัญของฟังก์ชันช่องสีใน LESS LESS รองรับฟังก์ชันในตัวเพียงไม่กี่ฟังก์ชันซึ่งกำหนดค่าเกี่ยวกับช่องสัญญาณ ช่องจะกำหนดค่าขึ้นอยู่กับการกำหนดสี สี HSL มีช่องสีความอิ่มตัวและความสว่างและสี RGB จะมีช่องสีแดงสีเขียวและสีน้ำเงิน ตารางต่อไปนี้แสดงฟังก์ชันช่องสีทั้งหมด -
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย | ตัวอย่าง |
---|---|---|
1 | hue ในพื้นที่สี HSL ช่องสีจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
2 | saturation ในพื้นที่สี HSL ช่องความอิ่มตัวจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
3 | lightness ในพื้นที่สี HSL ช่องความสว่างจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
4 | hsvhue ในพื้นที่สี HSV ช่องสีจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
5 | hsvsaturation ในพื้นที่สี HSL ช่องความอิ่มตัวจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
6 | hsvvalue ในพื้นที่สี HSL ช่องค่าจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
7 | red ช่องสีแดงถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
8 | green ช่องสีเขียวถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
9 | blue ช่องสีน้ำเงินถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
10 | alpha ช่องอัลฟาจะถูกแยกออกจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
11 | luma ค่าลูมาคำนวณจากวัตถุสี |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
12 | luminance ค่าลูมาคำนวณโดยไม่มีการแก้ไขแกมมา |
มันรวบรวมใน CSS ดังที่แสดงด้านล่าง - |
คำอธิบาย
LESS มีฟังก์ชันการทำงานที่มีประโยชน์มากมายในการปรับเปลี่ยนและปรับแต่งสีในรูปแบบต่างๆและใช้พารามิเตอร์ในหน่วยเดียวกัน LESS รองรับฟังก์ชั่นการใช้งานสีบางอย่างดังแสดงในตารางด้านล่าง -
ซีเนียร์ | คำสั่งและคำอธิบาย |
---|---|
1 | อิ่มตัว ความเข้มหรือความอิ่มตัวของสีในองค์ประกอบจะแตกต่างกันไป |
2 | ไม่อิ่มตัว จะลดความเข้มหรือความอิ่มตัวของสีในองค์ประกอบ |
3 | เบาลง เพิ่มความสว่างของสีในองค์ประกอบ |
4 | มืดลง ความเข้มหรือความอิ่มตัวของสีในองค์ประกอบจะแตกต่างกันไป |
5 | จางหาย เพิ่มความทึบให้กับองค์ประกอบที่เลือก |
6 | จางหายไป ลดความทึบขององค์ประกอบที่เลือก |
7 | เลือนหายไป ใช้เพื่อกำหนดความโปร่งใสของสีสำหรับองค์ประกอบที่เลือก |
8 | หมุน ใช้เพื่อหมุนมุมของสีสำหรับองค์ประกอบที่เลือก |
9 | ผสม มันผสมสองสีพร้อมกับความทึบ |
10 | โทนสี ผสมสีกับสีขาวเมื่อคุณลดสัดส่วนของสี |
11 | ร่มเงา มันผสมสีกับสีดำเมื่อคุณลดสัดส่วนของสี |
12 | สีเทา มันจะละทิ้งความอิ่มตัวของสีในองค์ประกอบที่เลือก |
13 | ความคมชัด ตั้งค่าคอนทราสต์สำหรับสีในองค์ประกอบ |
ในบทนี้เราจะเข้าใจไฟล์ Color Blending Functionsใน LESS สิ่งเหล่านี้เป็นการดำเนินการที่คล้ายกันที่ใช้ในโปรแกรมแก้ไขภาพเช่น Photoshop, Fireworks หรือ GIMP ซึ่งจะจับคู่สี CSS ของคุณกับภาพของคุณ
ตารางต่อไปนี้แสดงฟังก์ชันการผสมสีที่ใช้ใน LESS
ซีเนียร์ | ฟังก์ชั่นและคำอธิบาย |
---|---|
1 | คูณ มันคูณสองสีและส่งกลับสีที่เป็นผลลัพธ์ |
2 | หน้าจอ ใช้เวลาสองสีและส่งคืนสีที่สว่างกว่า มันทำงานตรงข้ามกับฟังก์ชันทวีคูณ |
3 | ซ้อนทับ มันสร้างผลโดยการรวมผลของการคูณและหน้าจอ |
4 | แสงอ่อน ทำงานคล้ายกับการซ้อนทับแต่ใช้เพียงบางส่วนของสีซึ่งเน้นสีอื่น ๆ ให้นุ่มนวล |
5 | ฮาร์ดไลท์ ทำงานคล้ายกับการซ้อนทับแต่บทบาทของสีกลับกัน |
6 | ความแตกต่าง มันจะลบสีอินพุตที่สองออกจากสีอินพุตแรก |
7 | ยกเว้น ทำงานคล้ายกับฟังก์ชันความแตกต่างแต่มีความคมชัดต่ำกว่า |
8 | เฉลี่ย จะคำนวณค่าเฉลี่ยของสีอินพุตสองสีต่อช่องสัญญาณ (RGB) |
9 | การปฏิเสธ ทำงานตรงข้ามกับฟังก์ชันที่แตกต่างซึ่งจะลบสีแรกออกจากสีที่สอง |
ใช้บรรทัดคำสั่งที่เราสามารถรวบรวม.lessไฟล์.css
การติดตั้ง lessc สำหรับการใช้งานทั่วโลก
คำสั่งต่อไปนี้ใช้เพื่อติดตั้ง lessc ด้วย npm (node package manager) เพื่อทำให้ lessc พร้อมใช้งานทั่วโลก
npm install less -g
คุณยังสามารถเพิ่มเวอร์ชันเฉพาะหลังชื่อแพ็กเกจได้ ตัวอย่างเช่นnpm install [email protected] -g
การติดตั้งสำหรับการพัฒนาโหนด
คำสั่งต่อไปนี้ใช้เพื่อติดตั้งlesscเวอร์ชันล่าสุดในโฟลเดอร์โปรเจ็กต์ของคุณ
npm i less -save-dev
นอกจากนี้ยังเพิ่มลงใน devDependencies ใน project package.json ของคุณ
รุ่นเบต้าของ lessc
มันถูกแท็กเป็นเบต้าเมื่อไฟล์ lessc เผยแพร่โครงสร้างไปยัง npmที่นี่มีการพัฒนาฟังก์ชันใหม่เป็นระยะ less -vใช้เพื่อรับเวอร์ชันปัจจุบัน
การติดตั้ง lessc เวอร์ชันการพัฒนาที่ไม่ได้เผยแพร่
จะต้องระบุคอมมิต - ish เมื่อเราดำเนินการติดตั้ง lessc เวอร์ชันที่ไม่ได้เผยแพร่และต้องปฏิบัติตามคำแนะนำเพื่อระบุ git URL เป็นการอ้างอิง เพื่อให้แน่ใจว่าคุณใช้ leesc เวอร์ชันที่ถูกต้องสำหรับโครงการของคุณ
การใช้งานฝั่งเซิร์ฟเวอร์และบรรทัดคำสั่ง
bin/lesscรวมไบนารีไว้ในที่เก็บ ทำงานร่วมกับ Windows, OS X และ nodejs บน * nix
การใช้บรรทัดคำสั่ง
อินพุตถูกอ่านจาก stdin เมื่อกำหนดแหล่งที่มาเป็นเส้นประหรือยัติภังค์ (-)
lessc [option option = parameter ...]
ตัวอย่างเช่นเราสามารถรวบรวม .less ถึง .css โดยใช้คำสั่งต่อไปนี้ -
lessc stylesheet.less stylesheet.css
เราสามารถรวบรวม .less ถึง .css โดยและย่อขนาดผลลัพธ์โดยใช้คำสั่งต่อไปนี้
lessc -x stylesheet.less stylesheet.css
ตัวเลือก
ตารางต่อไปนี้แสดงตัวเลือกที่ใช้ในการใช้บรรทัดคำสั่ง -
ซีเนียร์ | ตัวเลือกและคำอธิบาย | คำสั่ง |
---|---|---|
1 | Help ข้อความช่วยเหลือจะปรากฏขึ้นพร้อมตัวเลือกที่มีให้ |
|
2 | Include Paths รวมถึงเส้นทางที่ใช้ได้ไปยังห้องสมุด เส้นทางเหล่านี้สามารถอ้างอิงได้อย่างเรียบง่ายและค่อนข้างซับซ้อนในไฟล์ Less เส้นทางใน windows จะคั่นด้วยเครื่องหมายทวิภาค (:) หรืออัฒภาค (;) |
|
3 | Makefile สร้างรายการการอ้างอิงการนำเข้า makefile เพื่อ stdout เป็นเอาต์พุต |
|
4 | No Color ปิดการใช้งานเอาต์พุตสี |
|
5 | No IE Compatibility ปิดใช้งานการตรวจสอบความเข้ากันได้ของ IE |
|
6 | Disable Javascript ปิดการใช้งานจาวาสคริปต์ในไฟล์น้อยลง |
|
7 | Lint ตรวจสอบไวยากรณ์และรายงานข้อผิดพลาดโดยไม่มีเอาต์พุตใด ๆ |
|
8 | Silent โดยบังคับให้หยุดการแสดงข้อความแสดงข้อผิดพลาด |
|
9 | Strict Imports บังคับให้ประเมินการนำเข้า |
|
10 | Allow Imports from Insecure HTTPS Hosts นำเข้าจากโฮสต์ HTTPS ที่ไม่ปลอดภัย |
|
11 | Version จะแสดงหมายเลขเวอร์ชันและออก |
|
12 | Compress ช่วยในการลบช่องว่างและบีบอัดเอาต์พุต |
|
13 | Source Map Output Filename มันสร้าง sourcemap น้อยลง หากกำหนดตัวเลือกซอร์สแมปโดยไม่มีชื่อไฟล์จะใช้แม็พส่วนขยายที่มีชื่อไฟล์ Less เป็นซอร์ส |
|
14 | Source Map Rootpath รูทพา ธ ถูกระบุและควรเพิ่มไปยังพา ธ ไฟล์ Less ภายในซอร์สแมปและในไฟล์แม็พที่ระบุไว้ในเอาต์พุต css ของคุณ |
|
15 | Source Map Basepath มีการระบุพา ธ ซึ่งจะต้องถูกลบออกจากพา ธ เอาต์พุต Basepath อยู่ตรงข้ามกับตัวเลือก rootpath |
|
16 | Source Map Less Inline ไฟล์ Less ทั้งหมดควรรวมอยู่ใน Sourcemap |
|
17 | Source Map Map Inline ระบุว่าในเอาต์พุต css ไฟล์แผนที่ควรอยู่ในบรรทัด |
|
18 | Source Map URL URL ได้รับอนุญาตให้แทนที่จุดในไฟล์แผนที่ใน css |
|
19 | Rootpath กำหนดเส้นทางสำหรับการเขียน URL ใหม่ในการนำเข้าและ URL แบบสัมพัทธ์ |
|
20 | Relative URLs ในไฟล์ที่นำเข้า URL จะถูกเขียนใหม่เพื่อให้ URL สัมพันธ์กับไฟล์ฐานเสมอ |
|
21 | Strict Math มันประมวลผลฟังก์ชัน Math ทั้งหมดใน css ของคุณ โดยค่าเริ่มต้นจะปิด |
|
22 | Strict Units อนุญาตให้ใช้หน่วยผสม |
|
23 | Global Variable มีการกำหนดตัวแปรซึ่งสามารถอ้างอิงได้โดยไฟล์ |
|
24 | Modify Variable ซึ่งไม่เหมือนกับตัวเลือกตัวแปรส่วนกลาง มันย้ายการประกาศที่ท้ายไฟล์น้อยของคุณ |
|
25 | URL Arguments ในการย้ายไปยังทุก URL สามารถระบุอาร์กิวเมนต์ได้ |
|
26 | Line Numbers สร้างการแมปแหล่งที่มาแบบอินไลน์ |
|
27 | Plugin มันโหลดปลั๊กอิน |
|
ใช้น้อยลงในเบราว์เซอร์เมื่อคุณต้องการรวบรวมไฟล์ Less แบบไดนามิกเมื่อจำเป็นและไม่ได้อยู่บนเซิร์ฟเวอร์ เนื่องจากมีไฟล์จาวาสคริปต์ขนาดใหญ่น้อยกว่า
ในการเริ่มต้นเราต้องเพิ่มสคริปต์ LESS เพื่อใช้ LESS ในเบราว์เซอร์ -
<script src = "less.js"></script>
หากต้องการค้นหาแท็กสไตล์บนหน้าเราจำเป็นต้องเพิ่มบรรทัดต่อไปนี้ในหน้า นอกจากนี้ยังสร้างแท็กสไตล์ด้วย css ที่คอมไพล์แล้ว
<link href = "styles.less" rel = "stylesheet/less" type = "text/css"/>
การตั้งค่าตัวเลือก
ก่อนแท็กสคริปต์คุณสามารถตั้งค่าอ็อพชันบนอ็อบเจ็กต์ที่น้อยลงโดยใช้โปรแกรม ซึ่งจะส่งผลต่อการใช้งานแบบเป็นโปรแกรมทั้งหมดของแท็กลิงก์เริ่มต้นและน้อยลง
ตัวอย่างเช่นเราสามารถกำหนด option ได้ดังนี้ -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js"></script>
นอกจากนี้เรายังสามารถตั้งค่าตัวเลือกในรูปแบบอื่นบนแท็กสคริปต์ตามที่ระบุด้านล่าง -
<script>
less = {
env: "development"
};
</script>
<script src = "less.js" data-env = "development"></script>
คุณยังสามารถเพิ่มตัวเลือกเหล่านี้ลงในแท็กลิงก์
<link data-dump-line-numbers = "all"
data-global-vars = '{ "var": "#fff", "str": "\"quoted\"" }'
rel = "stylesheet/less" type = "text/css" href = "less/style.less">
ประเด็นที่ต้องพิจารณาสำหรับตัวเลือกแอตทริบิวต์ ได้แก่ -
window.less <script tag <link tagคือระดับความสำคัญ
ไม่สามารถเขียนแอตทริบิวต์ข้อมูลในกรณีอูฐ ตัวเลือกแท็กลิงก์จะแสดงเป็นตัวเลือกเวลา
แอตทริบิวต์ข้อมูลที่มีค่าที่ไม่ใช่สตริงควรเป็น JSON ที่ถูกต้อง
โหมดนาฬิกา
สามารถเปิดใช้งานโหมดนาฬิกาได้โดยตั้งค่าตัวเลือก env เพื่อพัฒนาและเรียกใช้less.watch ()หลังจากเพิ่มไฟล์ less.js หากคุณต้องการให้โหมดนาฬิกาเปิดใช้งานชั่วคราวให้เพิ่ม#! watchลงใน URL
<script>less = { env: 'development'};</script>
<script src = "less.js"></script>
<script>less.watch();</script>
ปรับเปลี่ยนตัวแปร
เปิดใช้งานการแก้ไขเวลาเรียกใช้ของตัวแปร LESS ไฟล์ LESS ถูกคอมไพล์ใหม่เมื่อมีการเรียกค่าใหม่ รหัสต่อไปนี้แสดงการใช้งานพื้นฐานของตัวแปรแก้ไข -
less.modifyVars({
'@buttonFace': '#eee',
'@buttonText': '#fff'
});
การแก้จุดบกพร่อง
เราสามารถเพิ่มตัวเลือก! dumpLineNumbers: mediaqueryไปยังตัวเลือกurl หรือdumpLineNumbersตามที่กล่าวไว้ข้างต้น mediaqueryตัวเลือกที่สามารถใช้กับ FireLESS (มันแสดงต้นฉบับน้อยชื่อไฟล์และสายจำนวนรูปแบบ CSS น้อยสร้าง.)
ตัวเลือก
ก่อนโหลดไฟล์สคริปต์ less.js ต้องตั้งค่าอ็อพชันในอ็อบเจ็กต์global less
<script>
less = {
env: "development",
logLevel: 2,
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
globalVars: {
var1: '"string value"',
var2: 'regular value'
},
rootpath: ":/a.com/"
};
</script>
<script src = "less.js"></script>
async- เป็นประเภทบูลีน ไฟล์ที่นำเข้าจะถูกร้องขอไม่ว่าจะมีอ็อพชัน async หรือไม่ก็ตาม โดยค่าเริ่มต้นจะเป็นเท็จ
dumpLineNumbers- เป็นประเภทสตริง ในไฟล์ css เอาต์พุตข้อมูลรายการต้นทางจะถูกเพิ่มเมื่อตั้งค่า dumpLineNumbers ช่วยในการดีบักกฎที่มาจาก
env- เป็นประเภทสตริง env อาจดำเนินการในการพัฒนาหรือการผลิต การพัฒนาจะถูกตั้งค่าโดยอัตโนมัติเมื่อ URL ของเอกสารเริ่มต้นด้วยfile:// หรือมีอยู่ในเครื่องของคุณ
errorReporting - เมื่อการคอมไพล์ล้มเหลวสามารถตั้งค่าวิธีการรายงานข้อผิดพลาดได้
fileAsync- เป็นประเภทบูลีน เมื่อเพจมีโปรโตคอลไฟล์ก็สามารถร้องขอว่าจะนำเข้าแบบอะซิงโครนัสหรือไม่
functions - เป็นประเภทวัตถุ
logLevel- เป็นประเภทตัวเลข จะแสดงระดับการบันทึกในคอนโซลจาวาสคริปต์
2: ข้อมูลและข้อผิดพลาด
1: ข้อผิดพลาด
0: ไม่มีอะไร
poll- ในโหมดนาฬิกาเวลาจะแสดงเป็นมิลลิวินาทีระหว่างการสำรวจ เป็นประเภทจำนวนเต็ม โดยค่าเริ่มต้นจะตั้งค่าเป็น 1,000
relativeUrls- URL ปรับให้สัมพันธ์กัน โดยค่าเริ่มต้นตัวเลือกนี้ถูกตั้งค่าเป็นเท็จ ซึ่งหมายความว่า URL นั้นสัมพันธ์กับไฟล์รายการน้อยอยู่แล้ว เป็นประเภทบูลีน
globalVars- แทรกรายการตัวแปรส่วนกลางลงในโค้ด ตัวแปรประเภทสตริงควรรวมอยู่ในเครื่องหมายคำพูด
modifyVars- ไม่เหมือนกับตัวเลือกตัวแปรส่วนกลาง มันย้ายการประกาศที่ท้ายไฟล์น้อยของคุณ
rootpath - กำหนดเส้นทางที่จุดเริ่มต้นของทรัพยากร URL ทั้งหมด
useFileCache- ใช้ต่อแคชไฟล์เซสชัน แคชในไฟล์ที่น้อยกว่าจะใช้ในการเรียก modifiedVars โดยที่ไฟล์ที่น้อยกว่าทั้งหมดจะไม่ถูกดึงกลับมาอีก
LESS เป็นมิตรกับข้ามเบราว์เซอร์ รองรับเบราว์เซอร์ที่ทันสมัยเช่น Google Chrome, Mozilla Firefox, Safari และ Internet Explorer และอนุญาตให้ใช้องค์ประกอบ CSS ซ้ำและเขียนโค้ด LESS ด้วยความหมายเดียวกัน คุณต้องระมัดระวังเกี่ยวกับผลกระทบด้านประสิทธิภาพในขณะที่ใช้ LESS ในฝั่งไคลเอ็นต์และในขณะที่แสดง JavaScript เพื่อหลีกเลี่ยงปัญหาเกี่ยวกับเครื่องสำอางเช่น
- สะกดผิดพลาด,
- การเปลี่ยนแปลงสี
- Texture
- Look
- ลิงค์ ฯลฯ
รวบรวมไฟล์ LESS ที่ฝั่งเซิร์ฟเวอร์เพื่อปรับปรุงระดับประสิทธิภาพของเว็บไซต์
PhantomJS ไม่ได้ใช้ฟังก์ชัน Function.prototype.bindดังนั้นคุณต้องใช้es5 shim JavaScript engine เพื่อทำงานภายใต้ PhantomJS ผู้ใช้สามารถทำการปรับเปลี่ยนด้วยตัวแปรเพื่อส่งผลต่อธีมและแสดงแบบเรียลไทม์โดยใช้ LESS ฝั่งไคลเอ็นต์ในการผลิต
หากคุณต้องการเรียกใช้ LESS ในเบราว์เซอร์รุ่นเก่าให้ใช้es-5 shim JavaScript engine ซึ่งเพิ่มคุณสมบัติ JavaScript ที่ LESS รองรับ คุณสามารถใช้แอตทริบิวต์บนสคริปต์หรือแท็กลิงก์โดยใช้JSON.parseซึ่งเบราว์เซอร์ต้องรองรับ
ในบทนี้เราจะทำความเข้าใจว่าปลั๊กอินสามารถอัปโหลดเพื่อขยายการทำงานของไซต์ได้อย่างไร ปลั๊กอินสามารถใช้เพื่อทำให้งานของคุณง่ายขึ้น
บรรทัดคำสั่ง
ในการติดตั้งปลั๊กอินโดยใช้บรรทัดคำสั่งก่อนอื่นคุณต้องติดตั้งปลั๊กอิน lessc สามารถติดตั้งปลั๊กอินได้โดยใช้ปลั๊กอินน้อยในตอนเริ่มต้น บรรทัดคำสั่งต่อไปนี้จะช่วยคุณติดตั้งปลั๊กอิน clean-css -
npm install less-plugin-clean-css
โดยตรงคุณสามารถใช้ปลั๊กอินที่ติดตั้งโดยใช้คำสั่งต่อไปนี้ -
lessc --plugin = path_to_plugin = options
การใช้ปลั๊กอินในรหัส
ในโหนดจำเป็นต้องใช้ปลั๊กอินและส่งผ่านในอาร์เรย์เป็นปลั๊กอินตัวเลือกไปยังส่วนที่น้อยกว่า
var pluginName = require("pluginName");
less.render(myCSS, { plugins: [pluginName] })
.then(function(output) {
},
function(error) {
});
ในเบราว์เซอร์
ก่อนสคริปต์ less.js ผู้สร้างปลั๊กอินควรรวมไฟล์ javascript ไว้ในเพจ
<script src = "plugin.js"></script>
<script>
less = {
plugins: [plugin]
};
</script>
<script src = "less.min.js"></script>
รายการปลั๊กอินน้อย
ตารางต่อไปนี้แสดงรายการปลั๊กอินที่มีอยู่ใน LESS
Postprocessor / Feature Plugins
ซีเนียร์ | ปลั๊กอินและคำอธิบาย |
---|---|
1 | Autoprefixer ใช้เพื่อเพิ่มคำนำหน้าให้กับ CSS หลังการแปลจาก LESS |
2 | CSScomb ช่วยปรับปรุงการบำรุงรักษาสไตล์ชีตของคุณ |
3 | สะอาด css ลดขนาดเอาต์พุต CSS จาก LESS |
4 | CSSWring บีบอัดหรือย่อขนาดเอาต์พุต CSS จาก LESS |
5 | css- พลิก ใช้เพื่อสร้าง CSS จากซ้ายไปขวา (LTR) หรือขวาไปซ้าย (RTL) |
6 | ฟังก์ชั่น มันเขียนฟังก์ชันของ LESS ใน LESS เอง |
7 | ลูกโลก ใช้เพื่อนำเข้าไฟล์หลายไฟล์ |
8 | กลุ่ม css สื่อแบบสอบถาม ดำเนินการหลังการประมวลผลสำหรับ Less |
9 | URL แบบอินไลน์ แปลง URL เป็น data uri โดยอัตโนมัติ |
10 | npm นำเข้า นำเข้าจากแพ็คเกจ npm น้อยกว่า |
11 | ขอร้อง ใช้เพื่อโพสต์โปรเซสน้อยลง |
12 | rtl LESS ถูกย้อนกลับจาก ltr (ซ้ายไปขวา) เป็น rtl (ขวาไปซ้าย) |
ผู้นำเข้ากรอบ / ไลบรารี
ซีเนียร์ | ผู้นำเข้าและคำอธิบาย |
---|---|
1 | Bootstrap รหัส Bootstrap LESS ถูกนำเข้าก่อนโค้ด LESS ที่กำหนดเอง |
2 | แก้ไข Bower ไฟล์ LESS ถูกนำเข้าจากแพ็คเกจ Bower |
3 | Cardinal CSS สำหรับ less.js ก่อนรหัส LESS ที่กำหนดเองรหัส LESS สำหรับ Cardinal จะถูกนำเข้า |
4 | ตาราง Flexbox ผู้นำเข้า Framework หรือไลบรารีที่นำเข้ามากที่สุด |
5 | ระบบกริดที่ยืดหยุ่น นำเข้าระบบ Flexible Grid |
6 | ไอออนิก มันนำเข้ากรอบไอออนิก |
7 | Lesshat นำเข้าส่วนผสมของ Lesshat |
8 | โครงกระดูก มันนำเข้ารหัสโครงกระดูกน้อย |
ไลบรารีฟังก์ชัน
Sr.No. | Importers & Description |
---|---|
1 | advanced-color-functions It is used to find more contrasting colors. |
2 | cubehelix Using gamma correction value of 1, the cubehelix function can return a color between the two colors. |
3 | lists This lists manipulation functions library. |
For Plugin Authors
LESS allow an author to combine with less.
{
install: function(less, pluginManager) {
},
setOptions: function(argumentString) {
},
printUsage: function() {
},
minVersion: [2, 0, 0]
}
pluginManager provides a holder which can add file managers, post processors or visitors.
setOptions function passes the string.
printUsage function is used to explain the options.
The main point of programmatic usage in the LESS is less.render function. This function uses the following format in LESS −
less.render(input_data, options)
.then(function(output) {
//code here
},
function(error) {
});
the function can also be written in the following way −
less.render(css, options, function(error, output) {})
The options is an optional argument which returns a promise when you don't specify the callback and returns a promise when you specify the callback. You can display the file by reading it into string and set the filename fields of the main file.
The sourceMap option allows to set sourcemap options such as sourceMapURL, sourceMapBasepath, sourceMapRootpath, outputSourceFiles and sourceMapFileInline. The point that needs to be considered here is that the sourceMap option is not available for the less.js.
You can gain access to the log by adding a listener as shown in the below format −
less.logger.addListener({
debug: function(message) {
},
info: function(message) {
},
warn: function(message) {
},
error: function(message) {
}
});
The above defined functions are optional. If an error is displayed, then it will pass the error to callback or promise present in the less.render.
In this chapter, we will understand the importance of online compilers in LESS. Online compilers are used to compile the less code into css code. Online compilers tools easily help to generate the css code. Following are the available online less compilers −
winless.org/online-less-compiler
lesstester.com
dopefly.com/less-converte
lessphp.gpeasy.com/demo
leafo.net/lessphp/editor
estFiddle
Online Web IDEs/Playgrounds with Less support
Following are the available Online Web IDEs with Less support.
Sr.No. | Online Web IDEs & Description |
---|---|
1 | CSSDeck Labs This is a place where you can easily create testcases that involve HTML, CSS, JS code. |
2 | CodePen This is a playground for the frontend web. |
3 | Fiddle Salad This is a place where you can add an existing code in the environment. |
4 | JS Bin This helps Javascript and CSS code. |
5 | jsFiddle This is an online web editor. |
In this chapter, we will understand the GUIs for LESS. You can use different LESS tools for your platform. For command line usage and tools click this link.
The following table lists the GUI compilers that supports cross platform.
Sr.No. | Tools & Description |
---|---|
1 | Crunch 2! It supports across platforms like Windows, Mac and Linux. It provides editor with integrated compiling. |
2 | Mixture It is a rapid prototyping and static site generation tool used by designers and developers. It is quick, efficient and works well with your editor. It brings together a collection of awesome tools and best practices. |
3 | SimpLESS It is a minimalistic LESS compiler. It provides drag, drop and compile functionality. SimpLESS supports prefixing your CSS by using prefixr which is the unique feature of SimpLESS. It is built on Titanium platform. |
4 | Koala It is used to compile LESS, SASS and CoffeeScript. It provides features like compile error notification supports and compile options supports. |
The following table lists the GUI compilers that support Windows platform.
Sr.No. | Tools & Description |
---|---|
1 | Prepros It a tool that compiles LESS, SASS, Compass, Stylus, Jade and many more. |
2 | WinLess Initially it was a clone of LESS.app, it has several settings and takes more feature complete approach. It supports starting with command line arguments. |
The following table lists the GUI compilers that supports OS X platform.
Sr.No. | Tools & Description |
---|---|
1 | CodeKit t is successor of LESS.app and supports LESS among many other processing languages like SASS, Jade, Markdown and more. |
2 | LiveReload It edits CSS and changes images instantly. SASS, LESS, CoffeeScript and others work well. |
The following table lists the GUI compilers that supports OS X platform.
Sr.No. | Tools & Description |
---|---|
1 | Plessc It is gui frontend for lessc. It has features like log viewer, auto compile, opening the LESS file with the chosen editor and sourcemap support. |
In this chapter, we will understand the importance of editors and plugins in LESS. An Editor is a system or program which allows a user to edit text. Plugin is a piece of software that is used to expand the functionality of the site.
Let us now discuss editors and IDEs for LESS.
Sr.No. | Editors and IDEs & Description |
---|---|
1 | Crunch! It supports cross-platforms like Windows, Mac and Linux. It provides editor with integrated compiling. |
2 | Mindscape Web Workbench It provide CoffeeScript, SASS, Compass and LESS editing and makes modern web development easy in Visual Studio. |
3 | NetBeans It is an open-source Java-based IDE. This helps in the quick development of your desktop, mobile and web applications as well as HTML5 applications that involve HTML, JavaScript and CSS. |
4 | TextMate It is a general purpose graphical text editor for Mac OS X. It features declarative customizations, recordable macros, snippets, shell integration, open documents tabs and an extensible bundle system. |
5 | Vim The vim bundle adds functionalities like indenting, highlighting and auto completion for the dynamic stylesheet language LESS. |
6 | Emacs It contains less-css-model that provides an Emacs mode for LESS CSS (lesscss.org); Emacs supports compile-on-save. |
7 | jetBrains WebStorm and PhpStorm WebStrom is a lightweight and powerful IDE. It is perfectly equipped for complex client-side and server development with Node.js. PhpStorm is an PHP IDE, which supports deep code understanding, and provides top-notch coding assistance and support for all major tools and frameworks. |
8 | Brackets It is a lightweight, powerful and an open-source code editor that helps web designers and front-end developers. |
9 | CodeLobster It is a portable integrated development environment (IDE) primarily for PHP. It also supports HTML, CSS and JavaScript development and plugins are available for Drupal, WordPress, Smarty, Joomla, JQuery, Facebook, Codeigniter, Yii and CakePHP. |
10 | KineticWing IDE It is a quick, clean, lightweight and portable IDE. It is a full-size development suite that helps you work smart and fast. |
11 | nodeMirror It is an open-source and easily customizable IDE. It utilizes CodeMirror.net, pty.js and other libraries. |
12 | HTML-Kit Tools This is a modern web editor for HTML5, CSS3, JavaScript and more. With this, you can edit, preview, validate publish and manage projects from modern standards compliant editor. |
Sublime Text 2 & 3
ข้อความประเสริฐมีตัวเลือกที่แตกต่างกันสำหรับน้อยกว่าที่ระบุไว้ในตารางต่อไปนี้ -
ซีเนียร์ | ตัวเลือกและคำอธิบาย |
---|---|
1 | น้อยประเสริฐ ไวยากรณ์ LESS สำหรับข้อความประเสริฐให้การเน้นไวยากรณ์สำหรับไฟล์ . lessพร้อมกับตัวอย่างข้อมูล |
2 | Sublime-Less-to-CSS ปลั๊กอินSublime text 2และ3เพื่อรวบรวมไฟล์ . lessไปยัง CSS เมื่อคุณบันทึก มันต้องการlessc ติดตั้งบน PATH |
3 | น้อยสร้างประเสริฐ LESS build system สำหรับsublime text 2ซึ่งมีระบบบิลด์สองระบบสำหรับไฟล์ LESS ทั้งแบบย่อขนาดและไม่ลดขนาด |
4 | SublimeOnSaveBuild เป็นปลั๊กอินง่ายๆสำหรับSublime text 2เพื่อทริกเกอร์บิลด์เมื่อคุณคลิกบันทึก ทำงานได้ดีกับพรีโปรเซสเซอร์เช่น LESS, Compass และอื่น ๆ |
คราส
Eclipseมีปลั๊กอินสองตัวสำหรับ LESS ดังแสดงในตารางต่อไปนี้ -
ซีเนียร์ | ปลั๊กอินและคำอธิบาย |
---|---|
1 | ปลั๊กอิน Eclipse Less ด้วยการขยาย Eclipse IDE ปลั๊กอินนี้มีคุณลักษณะที่เป็นประโยชน์ในการแก้ไขและรวบรวมสไตล์ชีต LESS |
2 | ปลั๊กอิน Transpiler ปลั๊กอิน Eclipse นี้จะย้ายไฟล์ของคุณโดยอัตโนมัติเช่น LESS, SASS, CoffeeScript และอื่น ๆ |
Visual Studio
Visual Studioมีตัวเลือกต่าง ๆ ดังต่อไปนี้สำหรับ LESS -
ซีเนียร์ | ตัวเลือกและคำอธิบาย |
---|---|
1 | CSS น้อยกว่า ส่วนขยายนี้ทำให้เปิดไฟล์ LESS ด้วยบริการภาษา CSS |
2 | สิ่งจำเป็นสำหรับเว็บ 2012 ส่วนขยายนี้ช่วยให้คุณทำงานทั่วไปได้ง่ายขึ้นและเพิ่มคุณสมบัติที่เป็นประโยชน์ให้กับ Visual studio สำหรับนักพัฒนาเว็บ |
3 | สิ่งจำเป็นสำหรับเว็บ 2013 ขยาย Visual Studio ด้วยคุณสมบัติใหม่ ๆ มากมายซึ่งไม่เฉพาะเจาะจงสำหรับภาษาหรือตัวแก้ไขที่เฉพาะเจาะจง |
4 | เครื่องมือเว็บ 2013 สิ่งนี้ช่วยคุณในงานพัฒนาที่เกี่ยวข้องกับ ASP.NET |
Dreamweaver
จุดต่อไปนี้จะต้องมีการพิจารณาในขณะที่การทำงานร่วมกับDreamweaver
เป็นแอปพลิเคชัน Adobe ที่นักออกแบบและพัฒนาเว็บใช้เพื่อสร้างแอปพลิเคชันและเว็บไซต์
- สามารถทำงานได้ในหลายแพลตฟอร์มรวมถึงเบราว์เซอร์อุปกรณ์และแท็บเล็ต
นักออกแบบเว็บไซต์ใช้ Dreamweaver ในการสร้างต้นแบบเว็บไซต์
DMXzone Less CSS Compilerทำให้ LESS CSS มีอำนาจโดยตรงใน Dreamweaver
Notepad ++ 6.x
จุดต่อไปนี้จะต้องมีการพิจารณาในขณะที่การทำงานในNotepad ++
Notepad ++ เป็นโปรแกรมแก้ไขข้อความฟรีและตัวแก้ไขซอร์สโค้ดซึ่งรองรับการแก้ไขแบบแท็บกล่าวคือทำงานกับไฟล์ที่เปิดอยู่หลายไฟล์ในหน้าต่างเดียว
LESS for Notepad ++ เป็นไฟล์ xml ที่มีการเน้นไวยากรณ์หรือการระบายสีสำหรับไฟล์ .less หากต้องการข้อมูลเพิ่มเติมคลิกที่ลิงค์นี้
ในการติดตั้ง Notepad ++ คลิกที่ลิงค์นี้
Node.js คอมไพเลอร์
ต่อไปนี้เป็นคอมไพเลอร์ Node.js ที่ใช้สำหรับ LESS
ฮึดฮัด - มีส่วน - น้อย
Grunt คือ Node task runner มันจะรวบรวมสไตล์ชีตของคุณทุกครั้งที่คุณทำการเปลี่ยนแปลงไฟล์ LESS ของคุณ
ประกอบน้อย
แอสเซมบลีน้อยเป็นปลั๊กอินที่มีประสิทธิภาพสำหรับการคอมไพล์ไฟล์ LESS เป็น CSS งานที่น้อยกว่าจะดึงเทมเพลต JSON และ Lo - dash (ขีดล่าง) สำหรับการกำหนดบันเดิล LESS คอมโพเนนต์ UI สไตล์ชีตหรือธีมที่บีบอัด
อึกน้อย
มันเป็นปลั๊กอินน้อยสำหรับอึก gulp-minify-cssใช้เพื่อลดขนาด CSS ของคุณ gulp-sourcemapsถูกใช้เพื่อสร้างไลบรารี sourcemaps
รับ
เป็นเครื่องมือโอเพ่นซอร์สที่สร้างขึ้นจาก LESS และช่วยในการเพิ่มประสิทธิภาพโค้ด CSS ของคุณ ช่วยให้รหัส CSS ปราศจากข้อผิดพลาดสะอาดและจัดการได้
อัตโนมัติ
เป็นโปรแกรมดูไฟล์ . less ประกอบด้วยการติดตามการพึ่งพาและการแจ้งเตือนข้ามแพลตฟอร์ม
เชื่อมต่อมิดเดิลแวร์สำหรับ Less.js
ใช้เพื่ออนุญาตการประมวลผลสำหรับเชื่อมต่อ JS framework ของไฟล์ LESS รวบรวมไฟล์ต้นฉบับตามคำขอและแคชข้อมูลที่รวบรวมไว้สำหรับการร้องขอครั้งต่อไป
เทคโนโลยีอื่น ๆ
ต่อไปนี้เป็นเทคโนโลยีอื่น ๆ อีกสองสามอย่างที่ช่วยคุณรวบรวมโค้ด LESS
Wro4j Runner CLI
คุณสามารถดาวน์โหลดwro4j-runner.jarและสามารถรวบรวมโค้ด LESS ของคุณใน CSS โดยใช้คำสั่งต่อไปนี้ -
java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss
คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับWro4j Runner CLI
CSS :: LESSp
โมดูลนี้ใช้เพื่อแยกวิเคราะห์และคอมไพล์ไฟล์ LESS ลงในไฟล์ CSS ต่อไปนี้เป็นคำสั่งที่ใช้ในการคอมไพล์ -
lessp.pl styles.less > styles.css
คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับCSS :: LESSp
โฮสต์สคริปต์ของ Windows
ต่อไปนี้เป็นคอมไพเลอร์บรรทัดคำสั่งที่จะทำงานบน windows
cscript //nologo lessc.wsf input.less [output.css] [-compress]
OR
lessc input.less [output.css] [-compress]
คุณสามารถไปที่ลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับLess.js สำหรับ windows
ไม่มีจุด
ต่อไปนี้เป็นคอมไพเลอร์บรรทัดคำสั่งเพื่อเรียกใช้ dotless สำหรับ windows
dotless.Compiler.exe [-switches] <inputfile> [outputfile]
คุณสามารถเยี่ยมชมลิงค์ต่อไปนี้เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับdotless
UI / Theme Frameworks และส่วนประกอบ
LESS รองรับเฟรมเวิร์ก UI / ธีมบางส่วนตามที่แสดงในตารางต่อไปนี้ -
ซีเนียร์ | กรอบและคำอธิบาย |
---|---|
1 | 1pxdeep เป็นธีม Bootstrap 3 แบบแบนที่ให้การควบคุมโทนสีที่มีประสิทธิภาพ |
2 | Bootflat เป็นเฟรมเวิร์กโอเพ่นซอร์สที่ใช้ Bootstrap |
3 | BootPress เป็นเฟรมเวิร์ก PHP ที่ใช้ไฟล์ CMS แบบแบน |
4 | Bootstrap เป็นเฟรมเวิร์กส่วนหน้าแรกสำหรับอุปกรณ์เคลื่อนที่ที่มีประสิทธิภาพสำหรับการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น |
5 | Bootstrap a11y ธีม ช่วยให้เข้าถึงได้ง่ายสำหรับการพัฒนาเว็บ |
6 | รองเท้าบูท เป็นธีมโอเพ่นซอร์สที่มีธีมฟรีสำหรับ Bootstrap |
7 | พระคาร์ดินัล เป็นเฟรมเวิร์ก CSS สำหรับอุปกรณ์เคลื่อนที่เป็นอันดับแรกที่ช่วยให้สามารถรักษา CSS สำหรับเว็บไซต์ที่ตอบสนองอินเทอร์เฟซผู้ใช้และแอปพลิเคชัน |
8 | CSSHorus เป็นห้องสมุดที่ช่วยให้พัฒนาเว็บไซต์บนอุปกรณ์เคลื่อนที่ได้ง่าย |
9 | Flat UI ฟรี มันขึ้นอยู่กับ Bootstrap 3 ซึ่งมีส่วนประกอบพื้นฐานและซับซ้อนและมีการออกแบบธีมสำหรับ Bootstrap |
10 | ด้านหน้า เป็นเฟรมเวิร์กส่วนหน้าที่มีชุดเครื่องมือสำหรับสร้างวิดเจ็ต |
11 | InContent ระบุคำอธิบายของภาพโดยใช้ CSS3 และ SASS / LESS |
12 | หมึก มันสร้างเว็บอินเตอร์เฟสที่ตอบสนอง |
13 | JBST เป็นกรอบรูปแบบที่มีประสิทธิภาพที่ใช้สำหรับสร้างธีมย่อยสำหรับ WordPress และใช้เป็นตัวสร้างเว็บไซต์แบบสแตนด์อโลน |
14 | KNACSS ใช้เพื่อพัฒนาโครงการ HTML / CSS โดยใช้สไตล์ชีตที่ตอบสนองและขยายได้ |
15 | Kube เป็นกรอบ CSS ที่ใช้สำหรับนักออกแบบและนักพัฒนามืออาชีพ |
16 | เมโทร UI CSS เป็นกรอบงานส่วนหน้าที่ใช้สำหรับสร้าง Windows Metro Style ในโครงการ |
17 | พรี เป็นกรอบ CSS ที่ใช้ LESS |
18 | โหมโรง เป็นเฟรมเวิร์ก CSS ส่วนหน้าที่ใช้ LESS |
19 | สคีมา เป็นกรอบที่เบาและตอบสนองซึ่งช่วยในการสร้างเว็บไซต์ที่ซับซ้อน |
20 | UI ความหมาย เป็นเฟรมเวิร์กส่วนติดต่อผู้ใช้ที่สร้างเค้าโครงที่ตอบสนองโดยใช้ HTML |
21 | UIkit เป็นเฟรมเวิร์กส่วนหน้าซึ่งมีส่วนประกอบ HTML, CSS และ JS และใช้งานง่ายและพัฒนาเว็บแอปพลิเคชัน |
22 | ngBoilerplate เป็นระบบสร้างตามความฮึกเหิมที่ใช้สำหรับโครงการ AngularJS |
23 | รางน้อย เป็นภาษาสไตล์ชีทแบบไดนามิกที่ใช้ Less.js สำหรับโปรเจ็กต์ Rails |
24 | เก่ง เป็นเฟรมเวิร์กส่วนหน้าซึ่งมีส่วนประกอบ bootstrap HTML, CSS และ JavaScript สำหรับการพัฒนาโครงการเว็บที่ตอบสนอง |
ระบบกริด
LESS รองรับเฟรมเวิร์กระบบกริดดังแสดงในตารางต่อไปนี้ -
ซีเนียร์ | กรอบและคำอธิบาย |
---|---|
1 | ระบบกริดที่ยืดหยุ่น เป็นกรอบ CSS ที่สร้างโครงการเว็บด้วยวิธีที่ยืดหยุ่น |
2 | adaptGrid เป็นระบบกริดที่ตอบสนองสำหรับการพัฒนาเว็บแอปพลิเคชัน |
3 | ของเหลว เป็นระบบกริดที่ตอบสนองต่อน้ำหนักเบาโดยใช้ตัวประมวลผลล่วงหน้าน้อย |
4 | ระบบ Golden Grid เป็นระบบกริดสำหรับการออกแบบที่ตอบสนอง |
5 | น้อยเซนกริด ใช้สำหรับแก้ปัญหาการปัดเศษพิกเซลย่อย |
6 | Order.less เป็นไลบรารี LESS ที่ใช้สำหรับการจัดตำแหน่งระบบกริดและเครื่องชั่งแบบแยกส่วน |
7 | อย่างมีความรับผิดชอบ เป็นระบบกริดที่ปรับแต่งได้และแบบสแตนด์อโลน |
8 | หม้อไอน้ำที่ตอบสนอง เป็นระบบกริดน้ำหนักเบาที่ใช้ในการสร้างการออกแบบเว็บที่ตอบสนองสำหรับไซต์ |
9 | Semantic.gs เป็นการกระจายเริ่มต้นของเว็บเบราว์เซอร์ไปยังระบบปฏิบัติการ |
ห้องสมุด Mixin
LESS จัดเตรียมไลบรารี mixin ตามรายการในตารางต่อไปนี้ -
ซีเนียร์ | กรอบและคำอธิบาย |
---|---|
1 | 3L มีคุณสมบัติ CSS3 ใหม่ล่าสุดสำหรับตัวประมวลผลล่วงหน้าน้อย |
2 | เคลื่อนไหว เป็นไลบรารีที่ใช้สำหรับภาพเคลื่อนไหวของเบราว์เซอร์ที่ใช้ในโครงการ |
3 | ชัดเจน ใช้มิกซ์อินน้อยที่ใช้ซ้ำได้โดยไม่ทำลายสไตล์และสร้างขนาดที่มากเกินไปในสไตล์ชีต |
4 | Css3LessPlease มันแปลง css3please.com เป็นมิกซ์อินน้อยและองค์ประกอบจะได้รับการเปลี่ยนแปลงทันทีเมื่อคุณเรียกใช้ CSS |
5 | CssEffects มีลักษณะพิเศษ CSS ที่เขียนเป็น LESS mixins |
6 | Cssowl เป็นไลบรารี mixin ที่รองรับ LESS, SASS และ Stylus |
7 | cube.less เป็นคิวบ์ภาพเคลื่อนไหว 3 มิติที่สร้างขึ้นโดยใช้ CSS เท่านั้น |
8 | tRRtoolbelt.less เป็นไลบรารีที่มีมิกซ์อินและฟังก์ชันสำหรับดำเนินการกับไฟล์ LESS |
9 | est มันขึ้นอยู่กับ LESS ซึ่งช่วยให้เขียนโค้ด LESS ได้อย่างมีประสิทธิภาพมากขึ้น |
10 | หกเหลี่ยม สร้างรูปหกเหลี่ยม CSS ที่มีขนาดและสี |
11 | ไม่มีที่อยู่อาศัย เป็นไลบรารีของมิกซ์อินที่มีฟังก์ชันที่เป็นประโยชน์สำหรับ Less.js |
12 | LESS Elements มันคือชุดของ mixins สำหรับตัวประมวลผลล่วงหน้า LESS |
13 | หมวกน้อย เป็นไลบรารีมิกซ์อินที่ช่วยในการส่งออก CSS สำหรับเบราว์เซอร์ทั้งหมดและสร้างจำนวนเงาการไล่ระดับสีและภาพเคลื่อนไหวเป็นต้น |
14 | Lessley เป็นชุดทดสอบที่เขียนด้วยภาษา LESS |
15 | น้อย - bidi เป็นคอลเลกชันของมิกซ์อินน้อยซึ่งจัดแต่งทรงผมแบบสองทิศทางโดยไม่ต้องทำซ้ำรหัส |
16 | LESS-Mix มันเป็นไลบรารีของ mixin ที่เขียนด้วย LESS |
17 | media-query-to-type ใช้สำหรับสร้างแบบสอบถามสื่อซึ่งอนุญาตให้ Internet Explorer 8 และเวอร์ชันต่ำกว่าเข้าถึงเนื้อหาได้ |
18 | More-Colors.less มีตัวแปรสำหรับการปรับแต่งสีขณะออกแบบเว็บแอปพลิเคชัน |
19 | มาก - น้อย เป็นไลบรารีที่อนุญาตให้เขียนโค้ด CSS สำหรับความเข้ากันได้ข้ามเบราว์เซอร์ |
20 | More.less เป็นการรวมกันของ Compass และ Twitter Bootstrap ซึ่งให้มากขึ้นสำหรับ LESS โดยใช้ CSS3 และเบราว์เซอร์ผสมข้าม |
21 | มากหรือน้อย มีส่วนผสมที่ทรงพลังสำหรับ less js. |
22 | normalize.less ให้ CSS ปกติโดยใช้ LESS |
23 | โอบาน เป็นชุดของมิกซ์อินที่ช่วยเร่งกระบวนการพัฒนาเว็บแอปพลิเคชัน |
24 | พรีบูต เป็นชุดของบริการ LESS ที่ใช้มิกซ์อินและตัวแปรเพื่อการเขียน CSS ที่ดีขึ้นและสร้างขึ้นจาก Bootstrap |
25 | โหมโรงผสม มันเป็นไลบรารีมิกซ์อินน้อย |
26 | รูปร่างน้อย มีส่วนผสมจำนวนหนึ่งสำหรับระบุรูปร่างต่างๆสำหรับแอปพลิเคชัน |