ตัวประมวลผลล่วงหน้า CSS เปรียบเทียบ Sass กับ LESS

มี CSS Preprocessor จำนวนน้อย, LESS, Sass, Stylus และ Swith CSS มีเพียงไม่กี่ชื่อ. ตัวประมวลผลล่วงหน้า CSS, ดังที่เราได้กล่าวไว้บ่อยครั้งมีจุดประสงค์เพื่อให้การเขียน CSS เป็นแบบไดนามิกมีระเบียบและมีประสิทธิผลมากขึ้น แต่, คำถามคือคำถามใดที่ทำงานได้ดีที่สุด?

แน่นอนว่าเราจะไม่ดูพวกเขาทุกคนแทนเราจะเปรียบเทียบเพียงสองคนที่เป็นที่นิยมมากขึ้น: Sass และน้อยลง. ในการตัดสินใจเราจะเปรียบเทียบสองในเจ็ดปัจจัย: ปัจจัยที่มีประสิทธิภาพดีกว่าจะได้หนึ่งจุด ในกรณีที่เสมอกันจะได้รับหนึ่งคะแนน.

เอาล่ะ.

การติดตั้ง

เริ่มจากขั้นตอนพื้นฐานกันก่อน, การติดตั้ง. ทั้ง Sass และ LESS สร้างขึ้นบนแพลตฟอร์มที่แตกต่างกัน Sass ทำงานบน Ruby ในขณะที่ LESS เป็นไลบรารี JavaScript (ซึ่งมัน เป็น จริง ๆ แล้วก็สร้างบนทับทิม ในตอนแรก).

Sass: Sass ต้องการ Ruby เพื่อให้ทำงานได้ใน Mac สิ่งนี้ได้รับการติดตั้งไว้ล่วงหน้าแล้ว แต่ใน Windows คุณอาจต้องติดตั้งก่อนจึงจะสามารถเริ่มเล่นกับ Sass ได้ นอกจากนี้ Sass จะต้องติดตั้งผ่าน Terminal หรือ Command Prompt มีแอปพลิเคชั่น GUI หลายตัวที่คุณสามารถใช้งานได้ แต่ไม่ได้ฟรี.

หัก LESS สร้างขึ้นจาก JavaScript ดังนั้น LESS จึงเป็นเรื่องง่ายเหมือนการเชื่อมโยงไลบรารี JavaScript กับเอกสาร HTML ของคุณ นอกจากนี้ยังมีแอปพลิเคชัน GUI สองสามตัวที่จะช่วยในการรวบรวม LESS ไปยัง CSS และส่วนใหญ่นั้นฟรีและทำงานได้ดีมาก (เช่น WinLess และ LESS.app).

ข้อสรุป: น้อยกว่าชัดเจนในการเป็นผู้นำ.

ส่วนขยาย

ทั้ง Sass และ LESS มีส่วนขยายสำหรับการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น.

Sass: ในโพสต์ล่าสุดของเราเราได้พูดคุยเกี่ยวกับ Compass ซึ่งเป็นส่วนขยาย Sass-based ในปัจจุบันและเป็นที่นิยม คอมพาสมีจำนวน Mixins ให้เขียนไวยากรณ์ CSS3 ในเวลาที่น้อยลง.

แต่ Compass นั้นอยู่เหนือ CSS3 Mixins เพียงเพิ่มคุณสมบัติที่มีประโยชน์อื่น ๆ เช่น Helpers, Layout, Typography, Grid Grid และแม้แต่ Sprite Images อีกทั้งยังมี config.rb ไฟล์ที่เราสามารถควบคุมการส่งออก CSS และการตั้งค่าอื่น ๆ ดังนั้นโดยย่อ Compass เป็นแพ็คเกจที่รวมทุกอย่างไว้ในการพัฒนาเว็บไซต์ด้วย Sass.

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

ต่อไปนี้เป็นส่วนเสริมเล็กน้อยที่คุณอาจต้องรวมไว้ในโครงการของคุณ:

• CSS3 Mixins: องค์ประกอบ LESS, Preboot, LESS Mixins.
• ตะแกรง: 960.gs, Frameless, Semantic.gs
• แบบ: เท่าไร
• อื่น ๆ: Twitter Bootstrap

ข้อสรุป: ฉันคิดว่าเราต้องยอมรับ Sass และ Compass เป็นคู่ที่ยอดเยี่ยมและคุณสมบัติภาพ Sprite นั้นเป็น kickass จริง ๆ ดังนั้นจุดหนึ่งสำหรับ Sass ที่นี่.

ภาษา

ตัวประมวลผลล่วงหน้า CSS ทุกคนมีภาษาของตัวเองและส่วนใหญ่จะเป็นภาษาธรรมดา ตัวอย่างเช่นทั้ง Sass และ LESS มีตัวแปร แต่ไม่มีความแตกต่างอย่างมีนัยสำคัญในมันยกเว้น Sass กำหนดตัวแปรที่มี $ ลงชื่อในขณะที่ LESS ใช้กับ แอท สัญญาณ พวกเขายังคงทำสิ่งเดียวกัน: เก็บค่าคงที่.

ด้านล่างนี้เราจะตรวจสอบภาษาที่ใช้บ่อยที่สุดทั้งใน Sass และ LESS (ตามประสบการณ์ของฉัน).

การทำรัง

กฎการซ้อนเป็นวิธีปฏิบัติที่ดีในการหลีกเลี่ยงการเขียนตัวเลือกซ้ำ ๆ และทั้ง Sass และ LESS จะมีวิธีการเดียวกันกับกฎการซ้อน

Sass / Scss และ LESS

 nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; ul padding: 0; กำไรขั้นต้น: 0;  

แต่ Sass / Scss ใช้วิธีการนี้อีกขั้นด้วยการอนุญาตให้เราทำรังคุณสมบัติของแต่ละบุคคลนี่คือตัวอย่าง:

 nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; ul padding: 0; กำไรขั้นต้น: 0;  border: style: solid; ซ้าย: width: 4px; สี: # 333333;  ขวา: width: 2px; สี: # 000000;  

รหัสนี้จะสร้างผลลัพธ์ต่อไปนี้.

 nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; สไตล์เส้นขอบ: ทึบ; ความกว้างชายแดนซ้าย: 4px; สีขอบซ้าย: # 333333; ความกว้างชายแดนด้านขวา: 2px; สีเส้นขอบขวา: # 000000;  nav ul padding: 0; กำไรขั้นต้น: 0;  

ข้อสรุป: การทำรังคุณสมบัติของแต่ละบุคคลเป็นการเพิ่มเติมที่ดีและได้รับการพิจารณา ปฏิบัติที่ดีที่สุด, โดยเฉพาะอย่างยิ่งถ้าเราทำตามหลักการ DRY (อย่าทำซ้ำตัวเอง) หลักการ ดังนั้นฉันคิดว่ามันชัดเจนว่าอันไหนที่ทำได้ดีกว่าในกรณีนี้.

Mixins และตัวเลือกการสืบทอด

มิกซ์อินใน Sass และ LESS นั้นแตกต่างกันเล็กน้อย ใน Sass เราใช้@mixin คำสั่งในขณะที่น้อยเรากำหนดมันด้วยตัวเลือกชั้นเรียน นี่คือตัวอย่าง:

Sass / SCSS

 @mixin border-radius ($ values) border-radius: $ values;  nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; @ รวมรัศมีของขอบ (10px)  

น้อย

 .border (@radius) border-radius: @radius;  nav margin: 50px auto 0; ความกว้าง: 788px; ความสูง: 45px; .border (10px);  

มิกซ์อินใน Sass และ LESS ถูกใช้เพื่อ ประกอบด้วย คุณสมบัติจากหนึ่ง ruleset ไปยัง ruleset อื่น ใน Sass วิธีนี้จะได้รับการเพิ่มเติมด้วย ตัวเลือกการสืบทอด. แนวคิดนี้เหมือนกัน แต่แทนที่จะคัดลอกคุณสมบัติทั้งหมด Sass จะขยายหรือเลือกกลุ่มที่มีคุณสมบัติและค่าเดียวกันโดยใช้ @extend คำสั่ง.

ลองดูตัวอย่างด้านล่างนี้:

 .วงกลม border: 1px solid #ccc; รัศมีเส้นขอบ: 50px; ล้น: ซ่อนอยู่;  .avatar @extend .circle;  

รหัสนี้จะส่งผลดังนี้

 .วงกลม, .avatar border: 1px solid #ccc; รัศมีเส้นขอบ: 50px; ล้น: ซ่อนอยู่;  

ข้อสรุป: Sass เป็นหนึ่งในขั้นตอนต่อไปโดย Mixins และ Selectors Inheritance.

การดำเนินงาน

ทั้ง Sass และ LESS สามารถดำเนินการทางคณิตศาสตร์ขั้นพื้นฐานได้ แต่บางครั้งพวกเขาก็ให้ผลลัพธ์ที่แตกต่างกัน ดูวิธีที่พวกเขาทำการคำนวณแบบสุ่มนี้:

Sass / SCSS

 $ margin: 10px; div margin: $ margin - 10%; / * ข้อผิดพลาดทางไวยากรณ์: หน่วยที่เข้ากันไม่ได้: '%' และ 'px' * / 

น้อย

 @margin: 10px; div margin: @margin - 10%; / * = 0px * / 

ข้อสรุป: Sass ในกรณีนี้กำลังทำอย่างถูกต้องมากขึ้น เนื่องจาก% และ px ไม่เท่ากันจึงควรส่งคืนข้อผิดพลาด ถึงแม้ว่าฉันจะหวังว่ามันจะเป็นแบบนั้น 10px - 10% = 9px.

การแจ้งเตือนข้อผิดพลาด

การแจ้งข้อผิดพลาดเป็นสิ่งสำคัญที่จะเห็นสิ่งที่เรากำลังทำผิด ลองนึกภาพหลายพันบรรทัดของรหัสและข้อผิดพลาดเล็กน้อยที่ใดที่หนึ่งในความสับสนวุ่นวาย ความชัดเจน การแจ้งเตือนข้อผิดพลาด จะเป็นวิธีที่ดีที่สุดในการค้นหาปัญหาอย่างรวดเร็ว.

Sass: ในตัวอย่างนี้ฉันแค่ใช้ Command Prompt เพื่อเรียกใช้คอมไพเลอร์ Sass จะสร้างการแจ้งเตือนข้อผิดพลาดเมื่อใดก็ตามที่มีการเปลี่ยนแปลงในรหัส ในกรณีนี้เราจะลบเซมิโคลอนหนึ่งตัวในบรรทัดที่ 6 และสิ่งนี้จะกลายเป็นข้อผิดพลาด ลองดูภาพหน้าจอด้านล่าง.

เมื่อฉันเห็นการแจ้งเตือนนี้เป็นครั้งแรกฉันแทบจะไม่เข้าใจเลย นอกจากนี้ดูเหมือนว่า Sass จะปิดไปเล็กน้อยโดยที่ข้อผิดพลาดอยู่ มันบอกว่าเกิดข้อผิดพลาด บรรทัด 7, แทน 6.

น้อย: ด้วยสถานการณ์ข้อผิดพลาดเดียวกันการแจ้งเตือนแบบ LESS นั้นมีการนำเสนอที่ดีกว่าและดูเหมือนว่าจะมีความแม่นยำมากขึ้น ดูภาพหน้าจอนี้:

สรุป: น้อยกว่ามอบประสบการณ์ที่ดีขึ้นในเรื่องนี้และชนะมือลง.

เอกสาร

เอกสารเป็นส่วนสำคัญอย่างยิ่งสำหรับทุกผลิตภัณฑ์ แม้แต่นักพัฒนาที่มีประสบการณ์ก็จะพบว่ามันยากที่จะทำสิ่งที่ไม่มี เอกสาร.

Sass: ถ้าเราดูเอกสารที่เว็บไซต์ทางการฉันส่วนตัวรู้สึกเหมือนอยู่กลางห้องสมุดเอกสารนั้นครอบคลุมมาก ทว่ารูปลักษณ์และความรู้สึกนั้นสำคัญกับคุณไม่ใช่แรงบันดาลใจในการอ่านบวกกับพื้นหลังเป็นสีขาวล้วน.

การนำเสนอเป็นเหมือนเอกสาร W3 หรือ WikiPedia ฉันไม่รู้ว่านี่เป็นมาตรฐานในการแสดงเอกสารในอินเทอร์เน็ตหรือไม่ แต่ไม่ใช่วิธีเดียว.

น้อย: ในทางตรงกันข้ามเอกสารน้อยกว่าชัดเจนโดยไม่มีคำอธิบายข้อความมากเกินไปและมันดำลงไปในตัวอย่างโดยตรง มันยังมีตัวอักษรที่ดีและโทนสีที่ดีกว่า ฉันคิดว่านี่เป็นสาเหตุที่ LESS ดึงดูดความสนใจของฉันตั้งแต่แรกและฉันสามารถเรียนรู้ได้เร็วขึ้นเนื่องจากการจัดวางและการนำเสนอเอกสาร.

ข้อสรุป: การนำเสนอเอกสารน้อยกว่าดีกว่าถึงแม้ว่า Sass จะมีเอกสารที่ครอบคลุมมากกว่านี้ดังนั้นฉันคิดว่าเราสามารถเรียกเอกสารนี้ได้.

ความคิดสุดท้าย

ฉันคิดว่ามันเป็นข้อสรุปที่ชัดเจนว่า Sass ดีกว่า ด้วยคะแนนรวมของ 5 กับ 3 สำหรับน้อย. อย่างไรก็ตามมันไม่ได้หมายความว่า LESS นั้นไม่ดี พวกเขาเพียงแค่ต้องดีขึ้น ในท้ายที่สุดมันก็ขึ้นอยู่กับการตัดสินใจของผู้ใช้ปลายทางที่จะเลือกตัวประมวลผลล่วงหน้าตามที่พวกเขาเลือก ไม่ว่าจะเป็น Sass หรือน้อยตราบใดที่พวกเขาสบายและมีประสิทธิภาพมากขึ้นนั่นคือผู้ชนะในรายการของพวกเขา.

สุดท้ายหากคุณมีบางอย่างในใจเกี่ยวกับเรื่องนี้อย่าลังเลที่จะแบ่งปันในช่องแสดงความคิดเห็นด้านล่าง.