วิธีใช้ฟังก์ชันใน CSS น้อย - |การเขียนโปรแกรม|

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

Less CSS เป็นตัวประมวลผลล่วงหน้า CSS ที่มีประสิทธิภาพและไดนามิกซึ่งได้รับความสนใจและความนิยมอย่างมากในช่วงไม่กี่ปีที่ผ่านมา ในฐานะตัวประมวลผลล่วงหน้า มันทำหน้าที่เป็นส่วนเสริมของ 'Vanilla CSS' ซึ่งเป็นภาษาสไตล์ CSS ดั้งเดิมที่ใช้ในการพัฒนาเว็บ โดยนำเสนอคุณสมบัติและฟังก์ชันเพิ่มเติมมากมายที่ปรับปรุงประสบการณ์การจัดรูปแบบโดยรวม

วิดีโอ MUO ประจำวันนี้ เลื่อนเพื่อดำเนินการต่อกับเนื้อหา

หากคุณเชี่ยวชาญในการเขียน CSS มาตรฐาน คุณสามารถเปลี่ยนไปใช้ Less CSS ได้อย่างราบรื่นโดยไม่ต้องใช้เส้นโค้งการเรียนรู้ที่สูงชัน ความเข้ากันได้นี้ทำให้ง่ายต่อการรักษาความรู้ CSS ที่มีอยู่ของคุณในขณะที่ใช้ประโยชน์จากความสามารถขั้นสูงของ Less

ฟังก์ชันคืออะไรและเหตุใดจึงสำคัญ

ในการเขียนโปรแกรม ฟังก์ชันคือบล็อกของโค้ดที่ทำงานเฉพาะเจาะจง คุณยังสามารถใช้ซ้ำที่อื่นในโปรแกรมได้อีกด้วย ฟังก์ชันมักจะรับข้อมูล ประมวลผล และส่งคืนผลลัพธ์

ทำให้ง่ายต่อการลดรหัสที่ซ้ำกันภายในโปรแกรม ตัวอย่างเช่น สมมติว่าคุณมีโปรแกรมที่คำนวณส่วนลดตามราคาที่ผู้ใช้ป้อน ใน ภาษาอย่างจาวาสคริปต์ คุณสามารถใช้มันได้ดังนี้:

 function checkDiscount(price, threshold){ 
    if (price >= threshold){ 
        let discount = 5/100 * price; 
        return `Your discount is $${discount}`; 
    } else { 
        return `Sorry, this item does not qualify for a discount. ` 
    } 
}

จากนั้นคุณสามารถเรียกใช้ฟังก์ชันและส่งผ่าน ราคา และ เกณฑ์ .

 let price = prompt("Enter the item price: ") 
alert(checkDiscount(price, 500))

ด้วยการแยกตรรกะในการตรวจสอบส่วนลดออกไป โปรแกรมไม่เพียงแต่สามารถอ่านได้เท่านั้น แต่ขณะนี้คุณยังมีบล็อกรหัสที่ใช้ซ้ำได้ซึ่งจะประมวลผลส่วนลดและส่งกลับผลลัพธ์ มีฟังก์ชั่นอื่น ๆ อีกมากมายที่สามารถทำได้ แต่นี่เป็นเพียงพื้นฐาน

ทำความเข้าใจฟังก์ชันใน CSS น้อยลง

ใน CSS แบบดั้งเดิม มีชุดของฟังก์ชันที่จำกัดมากสำหรับคุณในฐานะนักพัฒนา หนึ่งในฟังก์ชั่นที่นิยมมากที่สุดใน CSS คือ คำนวณ() ฟังก์ชันทางคณิตศาสตร์ ซึ่งทำเหมือนจริงทุกประการ—ทำการคำนวณและใช้ผลลัพธ์เป็นค่าคุณสมบัติใน CSS

 p{ 
    background-color: red; 
    width: calc(13px - 4px); 
}

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

 @width: 10px; 
@height: 20px; 
div{ 
    margin:if((@width > @height), 10px, 20px) 
}

ในบล็อกโค้ดด้านบน คอมไพเลอร์ Less จะตรวจสอบว่าตัวแปร ความกว้าง (กำหนดโดย @ symbol) มากกว่าตัวแปร ความสูง . หากเงื่อนไขเป็นจริง ฟังก์ชันจะส่งกลับค่าแรกหลังเงื่อนไข (10px) มิฉะนั้น ฟังก์ชันจะส่งกลับค่าที่สอง (20px)

หลังจากคอมไพล์แล้ว เอาต์พุต CSS ควรมีลักษณะดังนี้:

 div { 
    margin: 20px; 
}

วิธีใช้บูลีนใน Less

บูลีนเป็นตัวแปรที่มีค่าที่เป็นไปได้สองค่า: จริง หรือ เท็จ . กับ บูลีน () ฟังก์ชันใน Less คุณสามารถเก็บค่าจริงหรือเท็จของนิพจน์ในตัวแปรเพื่อใช้ในภายหลังได้ นี่คือวิธีการทำงาน

 @text-color: red; 
@bg-color: boolean(@text-color = red);

ในบล็อกโค้ดด้านบน คอมไพเลอร์ Less จะตรวจสอบว่า ข้อความสี เป็นสีแดง จากนั้น bg-สี ตัวแปรเก็บค่า

วิธีการโค้งข้อความใน adobe illustrator

 div{ 
    background-color: if(@bg-color,green,yellow); 
}

บล็อกโค้ดด้านบนคอมไพล์เป็นดังนี้:

 div { 
  background-color: green; 
}

การแทนที่ข้อความภายในสตริงด้วยฟังก์ชันการแทนที่ ()

ไวยากรณ์สำหรับ แทนที่() ฟังก์ชันมีลักษณะดังนี้:

 replace(string, pattern, replacement, flags)

สตริง หมายถึงสตริงที่คุณต้องการค้นหาและแทนที่ ลวดลาย เป็นสตริงที่จะค้นหา ลวดลาย ยังสามารถเป็นนิพจน์ทั่วไป แต่โดยปกติจะเป็นสตริง หลังจากจับคู่สำเร็จ คอมไพเลอร์ Less CSS จะแทนที่สิ่งนั้น ลวดลาย กับ เปลี่ยน .

ทางเลือก, the แทนที่() ฟังก์ชันยังสามารถมี ธง พารามิเตอร์สำหรับแฟล็กนิพจน์ทั่วไป

 @string: "Hello"; 
@pattern: "ello"; 
@replacement: "i"; 
 
div::before{ 
    content: replace(@string,@pattern,@replacement) 
}

บล็อกรหัสด้านบนควรส่งผลให้เกิดสิ่งต่อไปนี้หลังจากการคอมไพล์:

9400D2E48EEEEC7590DBFE9BE49F3D57C06F4BD3

แสดงรายการฟังก์ชันใน CSS น้อย

ใน Less CSS คุณใช้เครื่องหมายจุลภาคหรือช่องว่างเพื่อกำหนดรายการค่าต่างๆ ตัวอย่างเช่น:

 @groceries: "bread", "banana", "potato", "milk";

คุณสามารถใช้ ความยาว() ฟังก์ชันประเมินจำนวนองค์ประกอบในรายการ

 @result: length(@groceries);

คุณยังสามารถใช้ สารสกัด() ฟังก์ชันดึงค่าที่ตำแหน่งใดตำแหน่งหนึ่ง ตัวอย่างเช่น หากคุณต้องการรับองค์ประกอบที่สามใน ร้านขายของชำ รายการ ให้คุณทำสิ่งต่อไปนี้:

 @third-element: extract(@groceries, 3);

ไม่เหมือนกับภาษาโปรแกรมทั่วไปที่ดัชนีรายการเริ่มต้นจาก 0 ดัชนีเริ่มต้นของรายการใน Less CSS จะเป็น 1 เสมอ

ฟังก์ชันรายการอื่นที่มีประโยชน์เมื่อสร้างเว็บไซต์ด้วย Less is the พิสัย() การทำงาน. ต้องใช้พารามิเตอร์สามตัว พารามิเตอร์แรกระบุตำแหน่งเริ่มต้นในช่วง พารามิเตอร์ที่สองระบุตำแหน่งสิ้นสุดและพารามิเตอร์สุดท้ายระบุค่าที่เพิ่มขึ้นหรือลดลงระหว่างแต่ละรายการในช่วง หากไม่ได้ระบุ ค่าเริ่มต้นคือ 1

 div { 
    margin: range(10px, 40px, 10); 
}

บล็อกรหัสด้านบนควรรวบรวมดังต่อไปนี้:

 div { 
 margin: 10px 20px 30px 40px; 
}

อย่างที่คุณเห็น คอมไพเลอร์ Less CSS เริ่มต้นจาก 10px เพิ่มค่าก่อนหน้า 10 จนกว่าจะถึงตำแหน่งสิ้นสุด (40px)

สร้างเว็บไซต์ง่ายๆ ด้วยฟังก์ชัน CSS น้อยลง

ถึงเวลารวบรวมทุกสิ่งที่คุณได้เรียนรู้และสร้างโครงการง่ายๆ ด้วย Less CSS สร้างโฟลเดอร์และเพิ่ม ดัชนี.htm และ style.less ไฟล์.

เปิด ดัชนี.htm ไฟล์และเพิ่มรหัส HTML ต่อไปนี้

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet/less" type="text/css" href="style.less" /> 
    <title>Document</title> 
</head> 
<body> 
    <div class="container"> 
        <h1> 
        </h1> 
    </div> 
<script src="https://cdn.jsdelivr.net/npm/less" ></script> 
</body> 
</html>

ในบล็อกรหัสด้านบนมีพาเรนต์ 'คอนเทนเนอร์' แผนก ด้วยความว่างเปล่า h1 องค์ประกอบ. เดอะ src คุณลักษณะบน สคริปต์ แท็กชี้ไปที่เส้นทางไปยัง Less CSS Compiler

หากไม่มีสิ่งนี้ สคริปต์ เบราว์เซอร์จะไม่สามารถเข้าใจโค้ดของคุณได้ หรือคุณสามารถติดตั้ง Less CSS บนคอมพิวเตอร์ของคุณผ่านทาง ตัวจัดการแพ็กเกจโหนด (NPM) โดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล:

 npm install -g less

เมื่อใดก็ตามที่คุณพร้อมที่จะรวบรวมไฟล์ .น้อย ไฟล์ เพียงเรียกใช้คำสั่งด้านล่าง ตรวจสอบให้แน่ใจว่าคุณได้ระบุไฟล์ที่คอมไพเลอร์ควรเขียนเอาต์พุต

 lessc style.less style.css

ใน style.less ไฟล์ สร้างสองตัวแปรคือ: ความกว้างของคอนเทนเนอร์ และ คอนเทนเนอร์-bg-สี เพื่อแสดงความกว้างและสีพื้นหลังของ 'คอนเทนเนอร์' แผนก ตามลำดับ

 @container-width: 50rem; 
@container-bg-color: yellow;

จากนั้น สร้างตัวแปร 3 ตัว ได้แก่ สตริง , ลวดลาย, และ เปลี่ยน . จากนั้นเพิ่มสไตล์สำหรับ 'คอนเทนเนอร์' แผนก และ h1 องค์ประกอบ.

 @string: "Hello from the children of planet Earth!"; 
@pattern: "children of planet Earth!"; 
@replacement: "inhabitants of Pluto!"; 
 
.container{ 
    width: @container-width; 
    background-color: @container-bg-color; 
    padding: if(@container-width > 30rem, range(20px, 80px, 20),""); 
    border: solid; 
} 
 
h1:first-child::after{ 
    content: replace(@string,@pattern,@replacement); 
}

ในบล็อกโค้ดด้านบน พิสัย() ฟังก์ชั่นตั้งค่า การขยายความ ทรัพย์สินบน 'คอนเทนเนอร์' แผนก . คอมไพเลอร์ Less ควรรวบรวมไฟล์ style.less ไฟล์ต่อไปนี้:

 .container { 
  width: 50rem; 
  background-color: yellow; 
  padding: 20px 40px 60px 80px; 
  border: solid; 
} 
h1:first-child::after { 
  content: "Hello from the inhabitants of Pluto!"; 
}

เมื่อคุณเปิด ดัชนี.htm ไฟล์ในเบราว์เซอร์ นี่คือสิ่งที่คุณควรเห็น:

ปรับปรุงประสิทธิภาพการทำงานของคุณด้วยตัวประมวลผลล่วงหน้า CSS

ในภาษาการเขียนโปรแกรมทั่วไป ฟังก์ชันจะลดจำนวนโค้ดที่คุณต้องเขียนและลดข้อผิดพลาดให้เหลือน้อยที่สุด ตัวประมวลผลล่วงหน้า CSS เช่น Less มีคุณสมบัติหลายอย่างที่ช่วยให้เขียนโค้ด CSS ได้ง่ายขึ้น

ตัวประมวลผลล่วงหน้า CSS มีประโยชน์เมื่อทำงานกับไฟล์ขนาดใหญ่ พวกมันช่วยให้ดีบักปัญหาได้ง่ายขึ้น ซึ่งจะช่วยปรับปรุงประสิทธิภาพการทำงานของนักพัฒนา