วิธีใช้ Sass กับเทมเพลต WordPress

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

วิธีใช้ Sass กับ WordPress เป็นคำแนะนำทีละขั้นตอนโดยละเอียดเกี่ยวกับวิธีใช้ปลั๊กอินนี้ ในช่วงไม่กี่ปีที่ผ่านมา ฉันได้เขียน CSS ขณะพัฒนาเว็บไซต์ จุดประสงค์ของบทความนี้คือไม่สอนวิธีใช้ Sass และอธิบายว่าทำไมมันถึงทรงพลัง กล่าวอีกนัยหนึ่ง ฉันจะแสดงวิธีใช้งานกับ WordPress หากคุณคลายการอาร์คไฟล์ .zip ให้เปลี่ยนชื่อและวางไว้ในโฟลเดอร์ htdocs ของคุณภายใน MAMP ในบทช่วยสอนนี้ เราจะใช้ชื่อฐานข้อมูลของเราเป็นรูทแทนชื่อผู้ใช้และรหัสผ่าน เนื่องจากเราใช้ MAMP เพื่อสร้างรหัสผ่าน Compass ซึ่งเป็นเฟรมเวิร์กการเขียน CSS แบบโอเพ่นซอร์ส จะถูกใช้ในคลาสนี้ด้วยเพราะช่วยให้คุณสามารถเพิ่มคุณสมบัติที่รวดเร็วและมีประโยชน์มากมายให้กับ Sass

เพียงป้อนโค้ดสองสามบรรทัดด้านล่างลงในเครื่องมือบรรทัดคำสั่งเพื่อติดตั้ง Sass และ Compass เราจะแสดงวิธีการทำบทช่วยสอนนี้โดยใช้ชุดรูปแบบที่ยี่สิบสี่ หากต้องการให้ Sass เห็นการอัปเดต เราจำเป็นต้องเพิ่มคำสั่งอีกหนึ่งคำสั่งในโปรแกรมแก้ไขบรรทัดคำสั่งของเรา เราจะใช้แบ็กเอนด์ Sass และ Compass เพื่อสร้างธีม WordPress ของเรา เริ่มต้นด้วยการเปิดรูปแบบเริ่มต้น คัดลอกบล็อกแสดงความคิดเห็นบน ไฟล์ CSS ในธีมที่สิบสี่ จากนั้นวางลงในไฟล์ css ในแถบด้านบน หากความคิดเห็นนี้เป็นเพียงประโยคเดียว ฉันจะเพิ่มความคิดเห็นนั้นไว้ที่ด้านบนสุดของสไตล์ของเรา

สามารถพบได้ในโฟลเดอร์ Sass ของเรา หากคุณต้องการเปลี่ยนพาธบรรทัดคำสั่งสำหรับโปรเจ็กต์ของคุณ ให้เก็บไว้ในโฟลเดอร์โปรเจ็กต์ที่ทำงาน จากนั้น ใช้บรรทัดคำสั่งด้านล่าง เปลี่ยนสไตล์หรือไฟล์ที่คุณต้องการสร้างหรือเปลี่ยนแปลง ฉันขอขอบคุณสำหรับการติดตั้งธีม WordPress ที่มี เวิร์กโฟลว์ Sass ที่ใช้งานได้ สำหรับผู้ใช้ Sass หรือ Less มีแอพและตัวเรียกใช้งานยอดนิยมมากมาย เมื่อคุณใช้สิ่งเหล่านี้ คุณสามารถวางโปรเจ็กต์ของคุณลงในโปรเจ็กต์ของคุณโดยตรง หรือคุณสามารถตั้งค่าได้ในเวลาไม่นานและทำงานหลายอย่างในโครงการของคุณให้เสร็จในคราวเดียว เมื่อเราเขียนโค้ดบางอย่างที่ทำลายหรือแนะนำโค้ดใหม่ลงในรีลีส Git เป็นเครื่องมือที่ทรงพลังที่จะคอยติดตามงานของเรา Sass สร้างโฟลเดอร์และไฟล์ใหม่บางส่วนโดยไม่ต้องอัปเดต Git ตัวอย่างเช่น โฟลเดอร์ The.sass-cache หรือโฟลเดอร์.sass-cache ไม่ได้มีวัตถุประสงค์เพื่อใช้บนเซิร์ฟเวอร์ที่ใช้งานจริงเมื่อสร้างขึ้น

CSS ใน Sass สำหรับ WordPress มีประสิทธิภาพมากกว่ามาก เนื่องจากช่วยให้นักพัฒนาสามารถใช้คุณลักษณะที่มีประโยชน์มากมาย เช่น ตัวแปร กฎที่ซ้อนกัน มิกซ์อิน โมดูล บางส่วน ส่วนขยาย/การสืบทอด และตัวดำเนินการ รหัสจะถูกรวบรวมและเบราว์เซอร์จะสามารถอ่านได้ในที่สุด

เมื่อคุณติดตั้ง Sass คุณสามารถใช้คำสั่ง sash เพื่อคอมไพล์ Sass ของคุณเป็น CSS เป็นสิ่งสำคัญที่คุณต้องระบุไฟล์ที่จะสร้างและตำแหน่งที่จะสร้าง CSS ตัวอย่างเช่น หากคุณเรียกใช้ sass input.scss output.js จากเทอร์มินัล คุณจะต้องมี ไฟล์ Sass ไฟล์เดียว , input.scss และไฟล์ output.js ไฟล์เดียว

ฉันจะนำเข้า Sass เข้าสู่ WordPress ได้อย่างไร

ในการนำเข้า Sass ไปยัง WordPress คุณจะต้องติดตั้ง ปลั๊กอิน WP- Sass ก่อน เมื่อติดตั้งแล้ว คุณสามารถเปิดใช้งานปลั๊กอินได้โดยไปที่แผงผู้ดูแลระบบ WordPress และไปที่หน้า "ปลั๊กอิน" จากที่นี่ คุณสามารถคลิกลิงก์ "เปิดใช้งาน" สำหรับปลั๊กอิน WP- Sass หลังจากเปิดใช้งาน คุณสามารถเริ่มใช้ Sass ในธีม WordPress ได้โดยเพิ่มบรรทัดโค้ดต่อไปนี้ในสไตล์ชีตของธีม: @import “sass/style.scss”;

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

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

วิธีใช้ Sass สำหรับปลั๊กอิน WordPress

ในการติดตั้ง SASS คุณต้องเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลก่อน ติดตั้ง -g sass จากโฟลเดอร์ npm install -g sass เมื่อติดตั้งแพ็คเกจแล้ว คุณจะสามารถแปลงไฟล์ SASS ของคุณเป็นไฟล์ CSS ได้โดยใช้คำสั่งต่อไปนี้: (*br) ต่อไปนี้เป็นตัวอย่างไฟล์ใน SASSS ข้อมูลเพิ่มเติมเกี่ยวกับการใช้ SASS สามารถพบได้ในเว็บไซต์ต่อไปนี้: **br> ปลั๊กอินมีให้จากเว็บไซต์นักพัฒนา WordPress

ความแตกต่างระหว่าง Scss และ Sass คืออะไร?

นี่คือภาษาสคริปต์ตัวประมวลผลล่วงหน้า ซึ่งใช้ในการสร้างหรือตีความ CSS โดยใช้ SASS (Syntactically Awesome Style Sheets) SCSS เป็นภาษาสคริปต์ ใช้เพื่อสร้าง ไวยากรณ์ CSS ที่มีอยู่โดยใช้ SassScript ซึ่งเป็นภาษาสคริปต์

CSS มีประสิทธิภาพมากขึ้นด้วยการสนับสนุนตัวแปรและคณิตศาสตร์ใน Sass ซึ่งเป็นภาษาที่รองรับ ไม่มีส่วนขยายเฉพาะมาตรฐาน CSS สำหรับส่วนขยายนี้ CSS, scss, scss และ scss เป็นตัวแยกวิเคราะห์ไวยากรณ์สี่ตัวใน Sass จากนั้นนิพจน์เหล่านี้จะถูกแปลงเป็นแผนผังโครงสร้างประโยคนามธรรม ซึ่งใช้เพื่อสร้าง CSS สไตล์ชีตสามารถเขียนได้ในสองรูปแบบโดยใช้ Sass (Syntactically Awesome StyleSheets) บางคนชอบ Sass ในขณะที่คนอื่นชอบ SCSS เราควรจำไว้ว่าไวยากรณ์เยื้องของ Sass ไม่ได้เลิกใช้

มันแตกต่างจากไฟล์ a.shtml เนื่องจากไฟล์ Sass เป็นไฟล์ข้อความธรรมดา Sass เป็นไวยากรณ์ใหม่ Sass ซึ่งเป็นสไตล์ชีตที่ยอดเยี่ยมทางไวยากรณ์เป็นหนึ่งในนั้น CSS คือชุดของส่วนขยาย CSS ที่เพิ่มพลังและความสง่างามให้กับภาษา เนื่องจากมันแยก CSS ในตอนท้าย Sass มาสก์ข้อจำกัดของ CSS ปกติในขณะที่ทำหน้าที่เป็นล่ามด้วย ssadi เป็นวงเล็บปีกกาและอัฒภาคในลักษณะซ้อนซึ่งฉันชอบ SCSS เป็นชื่อที่กำหนดให้กับไวยากรณ์หลัก ซึ่งสนับสนุนโดยตัวประมวลผลล่วงหน้าของ Sass CSS

เพื่อแยกการประกาศ เราใช้; ในรหัสด้านบน ในทางกลับกัน รหัส SASS ด้านล่างต้องตามด้วยบรรทัดเยื้องสองบรรทัด และไม่มีการใช้ . เพิ่ม SCSS ซึ่ง เป็นไวยากรณ์ SASS อย่างเป็นทางการ ในเวอร์ชัน 3 แล้ว ความแตกต่างที่เห็นได้ชัดเจนที่สุดคือตัวอักษรจะเขียนด้วยวงเล็บมากกว่าเครื่องหมายอัฒภาค แม้ว่า SASS จะรองรับทั้งสองรูปแบบ แต่แต่ละโปรเจ็กต์ต้องได้รับการออกแบบต่างกัน ระบุ extension.sass หรือ extension.scss หากคุณต้องการแยกความแตกต่างระหว่างรูปแบบต่างๆ SCSS (Syntactically Awesome Style Sheets) เป็นไวยากรณ์ใหม่สำหรับ Sass

SCSS นั้นมีเหตุผลและซับซ้อนกว่า SASS มากในแง่ของการอธิบายการเข้ารหัส SCSS เป็นตัวเลือกที่ดีที่สุดสำหรับผู้เริ่มต้นในด้านซอฟต์แวร์ ตัวแปรเป็นหนึ่งในคุณสมบัติที่สำคัญที่สุดของ Sass ส่วนขยาย CSS ใน Sass is.scss มากกว่า

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

วิธีใช้ Sass ในธีม WordPress ที่กำหนดเอง

Sass เป็น CSS พรีโปรเซสเซอร์ที่มีประสิทธิภาพซึ่งช่วยให้นักพัฒนาสามารถเขียนโค้ด CSS แบบไดนามิกและมีประสิทธิภาพมากขึ้น ใน WordPress คุณสามารถใช้ Sass ในธีมที่กำหนดเองเพื่อเร่งกระบวนการพัฒนาและทำให้โค้ด CSS จัดการได้ง่ายขึ้น หากต้องการใช้ Sass ในธีม WordPress ที่กำหนดเอง ก่อนอื่นให้สร้างไดเร็กทอรี "sass" ในไดเร็กทอรีรากของธีม จากนั้น สร้างไฟล์ Sass หลัก (เช่น “style.scss”) ใน ไดเร็กทอรี sass และนำเข้าไฟล์ Sass อื่นๆ ที่จะใช้ในธีม สุดท้าย เพิ่มลิงก์ไปยังไฟล์ Sass หลักในไฟล์ header.php ของธีม เมื่อใช้ Sass ใน WordPress สิ่งสำคัญคือต้องจัดโค้ด CSS ให้เป็นระเบียบและดูแลรักษาง่าย Sass สามารถช่วยเรื่องนี้ได้ด้วยการอนุญาตให้นักพัฒนาใช้ตัวแปร มิกซ์อิน และคุณลักษณะอื่นๆ ที่ทำให้โค้ด CSS กระชับและอ่านง่ายขึ้น

ภาษาตัวประมวลผลล่วงหน้าของ CSS เช่น Sass หรือ LESS มักใช้โดยนักออกแบบและนักพัฒนาส่วนหน้า คุณสามารถใช้คุณลักษณะต่างๆ ใน ​​Sass ที่ไม่มีใน CSS ได้ เช่น ตัวแปร ตัวดำเนินการทางคณิตศาสตร์พื้นฐาน การซ้อน และมิกซ์อิน เมื่อเปิดตัว WordPress เวอร์ชัน 3.8 ได้มีการตัดสินใจย้ายรูปแบบพื้นที่ผู้ดูแลระบบ WordPress ไปยัง Sass ใน Sass คุณสามารถนำเข้าไฟล์หลายไฟล์ไปยังสไตล์ชีตหลักของคุณ แล้วสร้างไฟล์ CSS ไฟล์เดียวสำหรับธีมของคุณ ในไดเรกทอรีสไตล์ชีตของคุณ Koala จะค้นหาและแสดงไฟล์ Sass โดยอัตโนมัติ ในการทดสอบนี้ คุณต้องเปิดไฟล์ Sass ก่อน คุณสามารถเพิ่มโค้ดลงในไฟล์ scs โดยพิมพ์ลงใน Notepad

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