ภาพรวมโดยย่อของความแตกต่างระหว่าง LESS และ SASS ความแตกต่างที่สำคัญระหว่าง Sass และ SCSS

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

1. LESS - ฝั่งไคลเอ็นต์สามารถใช้ JS ได้

เจาะจงกว่านั้นไม่ใช่ว่าเขาทำได้ แต่เขาออกแบบมาเพื่อสิ่งนี้ แนวทางปฏิบัติทั่วไปสำหรับการใช้โค้ด LESS:

ตอนนั้นเองที่มีการเพิ่มความสามารถในการคอมไพล์บนเซิร์ฟเวอร์ (ทั้ง js และ ruby) เข้าไป

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

เหตุผลชัดเจนหลังจากศึกษาบรรทัดสุดท้ายของเอกสาร LESS ที่ไม่มีคำอธิบาย:

@ความสูง: `document.body.clientHeight`;

เส้นเล็กๆ โดดเดี่ยวเช่นนี้มอบโอกาสที่นักออกแบบเลย์เอาต์ใฝ่ฝันมาตั้งแต่เริ่มต้นการเรียนรู้สไตล์ต่างๆ การเรียกสคริปต์ Java ฝั่งไคลเอ็นต์จาก CSS และคำนึงถึงการตั้งค่าเบราว์เซอร์จริงเมื่อสร้างสไตล์

นั่นคือตอนนี้เรามีโอกาสที่จะโหลด DOM ก่อนแล้วจึงสร้างมันขึ้นมา CSS ที่กำหนดเองตรงฝั่งไคลเอ็นต์ จากนั้นลองคิดด้วยตัวเองว่าสิ่งนี้จะเปิดโอกาสให้อะไรได้บ้าง

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

2. LESS ไม่เหมือน SASS/SCSS ตรงที่ไม่มีตรรกะ

ไม่มี if/then, for ฯลฯ ใน LESS แม้ว่าเมื่อพิจารณาว่า JS นั้นถูกสร้างไว้อย่างง่ายดาย แต่ฉันคิดว่ามันค่อนข้างเป็นไปได้ที่จะผิดพลาดในตรรกะ ฉันไม่ได้ลองมัน

3. การผสมง่ายกว่าใน LESS + คุณสามารถผสมคลาสได้

ฉันชอบความจริงที่ว่าใน LESS คุณสามารถรวมคุณสมบัติของคลาสอื่น ๆ ไว้ในคำจำกัดความได้ ตัวคลาสเองนั้นเป็นมิกซ์อิน นี่เป็นอีกคุณสมบัติหนึ่งที่ SASS/SCSS ไม่มี คุณสามารถรวมไฟล์ CSS ปกติเป็น LESS และใช้คลาสของไฟล์นั้นเพื่อกำหนดคุณสมบัติของคุณได้ ตัวอย่างเช่น:

ห่อ (
การตัดข้อความ: ห่อ;
พื้นที่สีขาว: ก่อนห่อ;
พื้นที่สีขาว: -moz-pre-wrap;
การตัดคำ: แบ่งคำ;
}
ก่อน ( .wrap )

ประวัติย่อ

ยกเว้นจุดที่ 1 ความแตกต่างนั้นไม่มากนักและตัวเลือกก็ยิ่งใหญ่กว่าสำหรับมือสมัครเล่น

สำหรับฉันโดยส่วนตัวแล้ว LESS ดูน่าดึงดูดยิ่งขึ้นเพราะความเรียบง่าย ฉันไม่เคยต้องการวงจรและเงื่อนไขในรูปแบบมาก่อน ยูทิลิตี้คลาสสิกเช่น "box-shadow, linear-gradient, darken" มีให้ใช้ในราคา LESS

ใช่ ห้องสมุดสำเร็จรูปหลายแห่งได้ถูกเขียนขึ้นสำหรับ SASS แล้ว (

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

ทำไมฉันจึงควรใช้มัน?

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

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

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

ด้วยลักษณะที่ซ้อนกันของตัวประมวลผลล่วงหน้า CSS คุณจะได้รับโค้ดขนาดกะทัดรัดพร้อมผลลัพธ์เดียวกัน LESS และ SCSS ยึดหลักการ DRY ซึ่งย่อมาจาก "อย่าพูดซ้ำตัวเอง" หรือ "อย่าพูดซ้ำตัวเอง"

พรีโปรเซสเซอร์ เริ่มต้นอย่างรวดเร็ว

เกิดอะไรขึ้นกับ LESS?

เครือข่ายเต็มไปด้วยการอภิปรายว่าอันไหนดีกว่า: LESS หรือ SCSS ดังนั้นฉันจะไม่ครอบคลุมทั้งสองหัวข้อโดยละเอียด ฉันจะพูดถึงปัญหาเล็กๆ น้อยๆ ที่ฉันมีกับ LESS แทน

SCSS ใช้สัญลักษณ์ $ เพื่อกำหนดตัวแปร ในขณะที่ LESS ใช้สัญลักษณ์ @ เนื่องจาก CSS ยังใช้สัญลักษณ์ @ สำหรับคำสั่งสื่อ การนำเข้า และภาพเคลื่อนไหวของคีย์เฟรม สิ่งนี้อาจทำให้นักพัฒนาสับสนได้

สัญลักษณ์ $ ไม่ได้ใช้ใน CSS สัญลักษณ์ @ มีอยู่ใน SCSS แต่ใช้สำหรับคำสั่ง @if , @else , @each , @for และ @ While

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

SCSS รองรับแบบดั้งเดิม การแสดงออกทางตรรกะเช่น if/else บล็อกและลูป มิกซ์อินที่ได้รับการปกป้องใน LESS นั้นมองเห็นได้ง่ายกว่า แต่เข้าใจได้ยากกว่า

สามารถทำได้โดยใช้ LESS...

...หรือเพียงแค่ใช้ SCSS

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

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

มีเรื่องปวดหัวมากขึ้นกับรหัสนี้...

พรีโปรเซสเซอร์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานการทำงานด้วย โปรเซสเซอร์ล่วงหน้าน้อยลงและสัสด้วย เป็นศูนย์สมบูรณ์ในเวลาน้อยกว่า 2 สัปดาห์

...กว่าด้วยสิ่งนี้

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

แม้ว่านี่จะเป็นความเห็นส่วนตัวของฉัน แต่โดยทั่วไปแล้ว SCSS จะจัดการค่าการคำนวณและค่าทางคณิตศาสตร์ได้ดีกว่า

เกิดอะไรขึ้นกับเรื่องนี้?

ในทางกลับกัน LESS นั้นซับซ้อนกว่ามาก เช่น เมื่อฉันใช้มัน ฉันไม่ได้พยายามคำนวณ แต่ถึงแม้ว่าผมจะทำ 100% ลบ 50px เท่ากับ 50% เมื่อใด?

น้อย เหตุใดคุณจึงละเลยค่าด้วยการเปลี่ยนหน่วย

ทำไมคุณถึงทำให้ฉันเรียนรู้ไม้ค้ำยันของคุณ ในเมื่อฉันรู้จัก CSS แล้ว?

และสิ่งสุดท้ายอย่างหนึ่ง ต้องขอบคุณโปรเจ็กต์ LibSass ที่ทำให้ SCSS มี Wrapper มากมายสำหรับภาษาอื่นๆ เช่น C, Go, PHP, Python, Dart เป็นต้น

เหตุใดเราจึงตัดสินใจละทิ้ง LESS เพื่อสนับสนุน SCSS

ในขณะที่เรากำลังพัฒนาการ์ด JotForm เราจำเป็นต้องประมวลผลค่าตัวแปรล่วงหน้า - การคอมไพล์ล่วงหน้าและการแคชฝั่งเซิร์ฟเวอร์ในเวลาเดียวกัน และทั้งหมดนี้จะต้องทำให้สมบูรณ์แบบ

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

เราไม่ได้เริ่มวงจรการพัฒนาโดยมีเป้าหมายในการย้ายจาก LESS ไปสู่ SCSS แต่ครึ่งทางของการจัดการกับปัญหาเล็กๆ น้อยๆ เหล่านี้ การไม่มีกระดาษห่อหุ้มที่ดีสำหรับ LESS ถือเป็นฟางเส้นสุดท้าย

อย่างไรก็ตามความแตกต่างระหว่าง LESS และ SCSS นั้นมีความสำคัญน้อยกว่าสิ่งที่เหมือนกัน ท้ายที่สุดแล้ว มันไม่สำคัญว่าคุณจะใช้พรีโปรเซสเซอร์ตัวไหน ตราบใดที่คุณใช้งานมัน

กำลังพยายามจัดการโครงการขนาดใหญ่ด้วยไฟล์ CSS ไฟล์เดียวและแบบดั้งเดิม โครงสร้างซีเอสเอสยากกว่าการใช้พรีโปรเซสเซอร์มากโดยมีปัญหาสองสามข้อ

1. LESS - ฝั่งไคลเอ็นต์สามารถใช้ JS ได้

เหตุผลชัดเจนหลังจากศึกษาบรรทัดสุดท้ายของเอกสาร LESS ที่ไม่มีคำอธิบาย:

@ความสูง: `document.body.clientHeight`;

นั่นคือตอนนี้เรามีโอกาสที่จะโหลด DOM ก่อนแล้วจึงสร้าง CSS พิเศษสำหรับมันโดยตรงบนฝั่งไคลเอ็นต์ จากนั้นลองคิดด้วยตัวเองว่าสิ่งนี้จะเปิดโอกาสให้อะไรได้บ้าง

2. LESS ไม่เหมือน SASS/SCSS ตรงที่ไม่มีตรรกะ

3. การผสมง่ายกว่าใน LESS + คุณสามารถผสมคลาสได้

ประวัติย่อ

ใช่ ห้องสมุดสำเร็จรูปหลายแห่งได้ถูกเขียนขึ้นสำหรับ SASS แล้ว (

ฉันเขียนเยอะมากใน เมื่อเร็วๆ นี้เกี่ยวกับ Sass แต่จากความคิดเห็นล่าสุดฉันรู้ว่าไม่ใช่ทุกคนที่มีความคิดที่ชัดเจนว่า Sass คืออะไร มาชัดเจนกว่านี้หน่อย:

เมื่อเราพูดถึง Sass เรามักจะหมายถึงตัวประมวลผลล่วงหน้าและภาษาโดยรวม ตัวอย่างเช่น เราพูดว่า "เราใช้ Sass" หรือ "นี่คือ Sass mixin"

ในขณะเดียวกัน Sass (ตัวประมวลผลล่วงหน้า) อนุญาตให้ใช้ไวยากรณ์ที่แตกต่างกันสองแบบ:

Sass หรือที่เรียกว่าไวยากรณ์เยื้อง
SCSS ไวยากรณ์เหมือน CSS

เรื่องราว

เดิม Sass เป็นส่วนหนึ่งของตัวประมวลผลล่วงหน้าอีกตัวหนึ่งคือ Haml ซึ่งคิดค้นและเขียนโดยนักพัฒนา Ruby

ดังนั้นสไตล์ Sass จึงใช้ไวยากรณ์เหมือน Ruby ไม่มีวงเล็บ ไม่มีอัฒภาค และไม่มีการเยื้องที่เข้มงวด เช่นนี้

// Variable!primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow= ซ่อน .my-other-element +border-radius(5px)

อย่างที่คุณเห็น เมื่อเทียบกับ CSS ทั่วไป ความแตกต่างที่เห็นได้ชัดเจน! แม้ว่าคุณจะเป็นผู้ใช้ Sass (ตัวประมวลผลล่วงหน้า) คุณจะเห็นว่าสิ่งนี้แตกต่างจากสิ่งที่เราคุ้นเคยอย่างมาก

ตัวแปรจะแสดงด้วย ! ไม่ใช่ $ สัญลักษณ์การมอบหมายค่า = ไม่ใช่ : ค่อนข้างผิดปกติ

แต่นี่คือลักษณะที่ Sass มองก่อนเวอร์ชัน 3.0 ซึ่งเปิดตัวในเดือนพฤษภาคม 2010 ซึ่งเปิดตัวอย่างสมบูรณ์ ไวยากรณ์ใหม่เรียกว่า SCSS หรือ Sassy CSS

เป้าหมายของเขาคือการทำให้ไวยากรณ์ Sass ใกล้ชิดกับ CSS มากขึ้น ทำให้เข้ากันได้กับ CSS มากขึ้น:

// ตัวแปร $primary-color: hotpink; // Mixin @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element ( สี: $primary -สี; ความกว้าง: 100%; ล้น: ซ่อนไว้; .my-other-element ( @include border-radius(5px); )

SCSS นั้นใกล้เคียงกับ CSS มากกว่า Sass อย่างแน่นอน นักพัฒนา Sass ทำงานอย่างหนักเพื่อทำให้ไวยากรณ์ทั้งสองอยู่ใกล้กันมากขึ้นโดยการแทนที่ !

(เครื่องหมายตัวแปร) และ = (เครื่องหมายกำหนด) บน $ และ: จาก CSS

ดังนั้นเมื่อเริ่มโปรเจ็กต์ใหม่ คุณอาจสงสัยว่าจะใช้ไวยากรณ์อะไร ให้ฉันครอบคลุมหัวข้อนี้และอธิบายข้อดีข้อเสียของแต่ละไวยากรณ์

แม้ว่าไวยากรณ์นี้อาจดูแปลกเล็กน้อยสำหรับคุณ แต่ก็มีหลายรูปแบบ ช่วงเวลาที่น่าสนใจ- ประการแรกจะสั้นกว่าและพิมพ์ง่ายกว่า ไม่มีวงเล็บหรืออัฒภาค แต่ไม่จำเป็น

ดียิ่งขึ้น! ไม่จำเป็นต้องใช้ @mixin หรือ @include เมื่อเพียงพอแล้ว สัญลักษณ์ง่ายๆ: = และ +

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

มีวิธีเดียวเท่านั้นที่จะเขียนโค้ด Sass: เขียนให้ถูกต้อง

แต่ระวัง! การเยื้องมีค่าบูลีนใน Sass เมื่อมีการใช้การเยื้องบล็อกตัวเลือก หมายความว่าเป็นตัวเลือกที่ซ้อนกัน

ตัวอย่างเช่น:

Element-a color: hotpink .element-b float: left ... ส่งออกโค้ด CSS ต่อไปนี้: .element-a ( color: hotpink; ) .element-a .element-b ( float: left; )

ข้อเท็จจริงง่ายๆ ของการเลื่อน .element-b ไปทางขวาหนึ่งระดับหมายความว่าเป็นเช่นนั้น องค์ประกอบลูกจาก .element-a ซึ่งเปลี่ยนโค้ด CSS ที่เป็นผลลัพธ์ ดังนั้นควรระวังการเยื้อง!

ในฐานะบุคคลภายนอก ฉันคิดว่าไวยากรณ์ที่ใช้การเยื้องน่าจะดึงดูดทีมที่ทำงานกับ Ruby/Python เป็นหลักมากกว่าทีมโปรแกรมเมอร์ PHP/Java (ไม่แน่ใจ ฉันอยากได้ยินสิ่งที่ตรงกันข้าม)

ข้อดีของไวยากรณ์ SCSS

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

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

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

เนื่องจาก SCSS เข้ากันได้กับ CSS จึงแทบไม่ต้องมีการฝึกอบรมเพิ่มเติม ไวยากรณ์ค่อนข้างจะเหมือนกัน ท้ายที่สุดแล้ว มันเป็นเพียง CSS ที่มีความพิเศษบางอย่าง

นี่เป็นสิ่งสำคัญสำหรับนักพัฒนาใหม่ เพื่อให้พวกเขาสามารถเริ่มเขียนโค้ดได้อย่างรวดเร็วโดยไม่ต้องมีความรู้เกี่ยวกับ Sass มากนัก

นอกจากนี้ยังสามารถอ่านได้มากขึ้นเนื่องจากโครงสร้างเฉพาะนั้นสมเหตุสมผลแล้ว เมื่อคุณเห็น @mixin คุณจะรู้ว่ามันเป็นการประกาศมิกซ์อิน เมื่อคุณเห็น @include คุณจะรู้ว่ามันเป็นการโทรแบบมิกซ์อิน

ไม่มีเงื่อนไขผูกมัดและทุกสิ่งก็สมเหตุสมผลโดยไม่ต้องตีความ

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

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

บทสรุป

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

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

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

นอกจากนี้ โปรดทราบว่า Sass ไม่เคยถูกอ้างอิงด้วยตัวย่อที่เป็นตัวพิมพ์ใหญ่ทั้งหมด ไม่ว่าจะเป็นไวยากรณ์หรือภาษาการเขียนโปรแกรมก็ตาม ในขณะที่ SCSS จะแสดงแทนเสมอ เป็นตัวพิมพ์ใหญ่- อยากรู้ว่าทำไม? เข้ามาดู SassnotSASS.com!

การแปลบทความ "ความแตกต่างระหว่าง Sass และ SCSS คืออะไร" จัดทำโดยทีมงานโครงการที่เป็นมิตร

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

คุณจะรู้ได้อย่างไรว่าต้องใช้ LESS เพื่ออะไร และ Sass เพื่ออะไร โดยหลักการแล้วมันค่อนข้างคล้ายกัน มาดูพวกเขากันดีกว่า ลักษณะทั่วไป:

* Mixins - คลาสสำหรับคลาส
* Parametric mixins - คลาสที่คุณสามารถใช้พารามิเตอร์ประเภทฟังก์ชันได้
* Nested Rules – คลาสภายในคลาสที่ตัดโค้ดที่ซ้ำกันออกไป
* การดำเนินงาน – คณิตศาสตร์ภายใน CSS
* ฟังก์ชั่นสี – การแก้ไขสี
* เนมสเปซ – กลุ่มของสไตล์ที่สามารถเรียกได้ด้วยลิงก์
* ขอบเขต – งาน การเปลี่ยนแปลงในท้องถิ่นในรูปแบบ
* การประเมินจาวาสคริปต์ – นิพจน์จาวาสคริปต์ที่กำหนดใน CSS

ความแตกต่างที่สำคัญระหว่าง LESS และ Sass คือวิธีการผลิต น้อยลง ไลบรารีจาวาสคริปต์และดำเนินการงานทางฝั่งไคลเอ็นต์ตามลำดับ

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

โปรดพิจารณาบทวิจารณ์นี้จาก Adam Stacoviak ซึ่งเขียนหลังจากบทความ Smashing Magazine ได้รับการพูดคุยกันอย่างหนักบน Twitter: “อันที่จริง Sass ต้องการ Ruby แม้ว่าจะไม่จำเป็นต้องรวบรวมเป็นเอกสาร CSS บนเซิร์ฟเวอร์ก็ตาม สามารถคอมไพล์ได้ในเครื่อง (ตามที่ระบุไว้ใน LESS) และไฟล์ที่คอมไพล์นี้สามารถย้ายพร้อมกับโปรเจ็กต์ของคุณ, เทมเพลต WordPress, Expression Engine และอื่นๆ เนื่องจากนี่คือ Smashing Magazine และฐานผู้ใช้ก็แตกต่างกันไป ฉันเดาว่าหลาย ๆ คนกำลังใช้ Mac ดังนั้น Ruby จึงเป็นค่าเริ่มต้นสำหรับทุกคน เครื่องแมค, ดังนั้น ติดตั้งง่าย Sass ช่วยให้คุณเริ่มต้นได้ทันที

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

น้อยลง - มากขึ้น!

การติดตั้ง

LESS นั้นค่อนข้างง่ายที่จะนำไปใช้ในโครงการใด ๆ ที่คุณกำลังทำอยู่:

ตัวแปร

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

@สีฟ้า: #00c;
@light_blue: @สีฟ้า + #333;
@dark_blue: @blue - #333;
หากเราใช้สไตล์เหล่านี้กับ 3 div เราจะได้เอฟเฟกต์การไล่สีที่สร้างขึ้นโดยการเพิ่มและลบค่าเข้าและออกจากสีน้ำเงินธรรมชาติ:

การเปลี่ยนจาก @light_blue เป็น @blue เป็น @dark_blue

ข้อแตกต่างระหว่างตัวแปรใน LESS และ Sass ก็คือ LESS ใช้ "@" และ Sass ใช้ "$" มีความแตกต่างอื่นๆ เช่นกัน แต่ก็ไม่ได้ยากที่จะเรียนรู้

มิกซ์อิน

หากเป็นไปได้ เราสามารถสร้างสไตล์ที่มีจุดประสงค์เพื่อนำมาใช้ซ้ำภายในเอกสารสไตล์ชีตเดียวกันได้ ไม่มีใครหยุดคุณไม่ให้ใช้คลาสหลายคลาสโดยนำไปใช้กับองค์ประกอบใน HTML แต่คุณสามารถทำได้โดยไม่ต้องปิด เอกสารซีเอสเอส- คุณเพียงแค่ต้องใช้ LESS เพื่อสาธิตสิ่งนี้ ฉันได้รวมโค้ดบางส่วนที่ช่วยให้คุณสามารถจัดสไตล์สององค์ประกอบบนหน้าเว็บได้

ชายแดน(
ขอบบน: 1px จุด #333;
}

บทความ.โพสต์(
พื้นหลัง: #eee;
.ชายแดน;
}

ul.เมนู (
พื้นหลัง: #ccc;
.ชายแดน;
}
คุณจะได้สิ่งที่คล้ายกับที่คุณคาดหวังไว้โดยกลับไปที่เอกสาร HTML ของคุณและเพิ่มคลาส ".bordered" ให้กับทั้งสององค์ประกอบ แต่สิ่งสำคัญที่ควรทราบก็คือ คุณดำเนินการนี้โดยไม่ต้องปิดเอกสาร CSS มันทำงานเช่นนี้:

ทั้งบทความและรายการแบบไม่เรียงลำดับมีรูปแบบเส้นขอบร่วมกัน

ด้วย Sass คุณจะประกาศ "@mixin" ให้เป็นลำดับความสำคัญของสไตล์เพื่อกำหนดให้เป็นมิกซ์อิน ถัดไป คุณประกาศ "@include" เพื่อเรียกมัน

@มิกซ์อิน เส้นขอบ (
ขอบบน: 1px จุด #333;
}

บทความ.โพสต์(
พื้นหลัง: #eee;
@รวมเส้นขอบ;
}

ul.เมนู (
พื้นหลัง: #ccc;
@รวมเส้นขอบ;
}
มิกซ์อินแบบพาราเมตริก

คล้ายกับวิธีที่คุณใช้ฟังก์ชันใน CSS ฟังก์ชั่นนี้อาจเป็นประโยชน์อย่างยิ่งสำหรับผู้ที่เต็มใจใช้สิ่งที่ดูเหมือน ความเป็นไปได้ที่ไร้ขีดจำกัด CSS ที่ทันสมัย- ตัวอย่างการใช้งานที่ดีที่สุดและมีประโยชน์ที่สุดเกี่ยวข้องกับคำนำหน้าผู้จำหน่ายเบราว์เซอร์หลายรายที่เราพบระหว่างการเปลี่ยนจาก CSS2 เป็น CSS3 Nettuts+ เผยแพร่โดย Jeffrey Way ซึ่งรวมถึง ข้อมูลรายละเอียดเกี่ยวกับการนำไฟล์ที่ประกอบด้วยมิกซ์อินพาราเมตริกที่มีประโยชน์ทั้งหมดไปใช้ บทความนี้ครอบคลุมถึงตัวเลือก CSS3 ที่คุณชื่นชอบพร้อมคำนำหน้าผู้ขาย ตัวอย่างเช่น มิกซ์อินอย่างง่ายเพื่อควบคุมมุมโค้งมนในรูปทรงต่างๆ:

รัศมีเส้นขอบ(@radius: 3px) (
-webkit-border-radius: @radius;
-moz-border-รัศมี: @radius;
รัศมีเส้นขอบ: @radius;
}
ใน ในกรณีนี้คลาส ".border-radius" มีรัศมี 3 พิกเซลตามค่าเริ่มต้น แต่คุณสามารถป้อนค่าใดก็ได้ที่ต้องการและรับ มุมโค้งมน- เช่น ".border-radius(10px)" จะปัดมุม 10 พิกเซล

ไวยากรณ์ใน Sass คล้ายกับ LESS มาก เพียงใช้ "$" สำหรับตัวแปร และเรียกมิกซ์อินโดยใช้เมธอด "@mixin" และ "@include" ที่ฉันกล่าวถึงก่อนหน้านี้

มรดกตัวเลือก

มาดูสิ่งที่ LESS ไม่มีกันดีกว่า ด้วยคุณลักษณะนี้ คุณสามารถใช้ตัวเลือกกับตัวเลือกที่ตั้งค่าไว้ก่อนหน้านี้ โดยไม่ต้องใช้รูปแบบที่คั่นด้วยเครื่องหมายจุลภาค

เมนู (
เส้นขอบ: 1px ทึบ #ddd;
}

ส่วนท้าย (
@ขยาย .เมนู;
}

/* จะแสดงผลดังนี้: */
.เมนู .ส่วนท้าย (
เส้นขอบ: 1px ทึบ #ddd;
}
กฎที่ซ้อนกัน

การแยกคลาสและรหัสใน CSS น่าจะเป็น วิธีที่ดีที่สุดป้องกันไม่ให้สไตล์ชีตแบบเรียงซ้อนของคุณถูกปะปนกัน หรือในทางกลับกัน กำหนดให้สไตล์ชีตโต้ตอบกับตารางอื่นๆ ที่เพิ่มเข้ามา แต่ แนวทางนี้มักจะสามารถนำมาซึ่งโค้ดจำนวนมากได้ การใช้ตัวเลือกเช่น “#site-body .post .post-header h2” ทำให้เราได้โค้ดที่ดูดีมากซึ่งใช้พื้นที่ค่อนข้างมาก ด้วย LESS คุณสามารถแยกรหัส คลาส และองค์ประกอบตามที่คุณต้องการได้ จากตัวอย่างด้านบน คุณสามารถดำเนินการดังนี้:

#ไซต์ร่างกาย ( ...

โพสต์ส่วนหัว (...

&: เยี่ยมชมแล้ว ( … )
&:โฮเวอร์ ( … )
}
}
}
}
โค้ดด้านบนนั้นเหมือนกันทุกประการกับตัวเลือกที่น่าเกลียดที่เรากล่าวถึงในย่อหน้าก่อนหน้า แต่จะอ่านและทำความเข้าใจได้ง่ายกว่ามาก และใช้พื้นที่น้อยกว่ามาก คุณยังสามารถจัดรูปแบบองค์ประกอบเพื่ออ้างถึงองค์ประกอบหลอกโดยใช้ "&" - ในกรณีนี้ฟังก์ชันนี้จะคล้ายกับ "this" ในจาวาสคริปต์

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

นี่เป็นสิ่งที่คุณคาดหวัง: การใช้ตัวเลขหรือตัวแปรที่แน่นอนเพื่อสร้าง การดำเนินการทางคณิตศาสตร์ในรูปแบบ

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
ยังไงก็ตาม ฉันรู้ว่าฉันสามารถหารองค์ประกอบด้วย 4 แล้วได้เหมือนกัน ตัวแปรประเภท"@quarter_page" แต่ฉันต้องการแสดงให้เห็นว่ากฎวงเล็บก็เหมาะสมเช่นกัน วงเล็บยังจำเป็นหากคุณต้องการดำเนินการภายในพารามิเตอร์ ตัวอย่างเช่น "เส้นขอบ: (@width / 2) ทึบ #000"

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

/* สัส */
2 นิ้ว + 3 ซม. + 2 ชิ้น = 3.514 นิ้ว

/* น้อย */
2 นิ้ว + 3 ซม. + 2 ชิ้น = ข้อผิดพลาด
หน้าที่ของสี

ฉันได้กล่าวไปแล้วว่า LESS ช่วยฉันในเรื่องของฉันได้อย่างไร โทนสีอยู่ในขั้นตอนการเขียนโค้ด หน้าที่ของดอกไม้ก็เชื่อมโยงกันอย่างแยกไม่ออกเช่นกัน ฉันจะถือว่าคุณใช้แบบมาตรฐาน สีฟ้าทั่วทั้งเอกสารสไตล์ของคุณ และคุณต้องการใช้สีนี้กับปุ่มส่งในแบบฟอร์มของคุณ คุณสามารถเปิด Photoshop หรือโปรแกรมแก้ไขอื่น ๆ เพื่อรับค่าฐานสิบหกจากที่นั่น (สำหรับสีที่สว่างกว่าหรือเข้มกว่าเล็กน้อย) หรือคุณสามารถใช้ฟังก์ชันสีที่ให้มาในรูปแบบ LESS ได้

ส่ง (
การขยาย: 5px 10px;
เส้นขอบ: 1px ทึบ @blue;
พื้นหลัง: -moz-linear-gradient(ด้านบน, เบาลง(@blue, 10%), @blue 100%); /*โมซ*/
พื้นหลัง: -webkit-gradient(เชิงเส้น, ตรงกลางด้านบน, ตรงกลางด้านล่าง, จาก (จางลง(@blue, 10%)), หยุดสี (100%, @blue)); /*เว็บคิท*/
พื้นหลัง: -o-linear-gradient(ด้านบน, ทำให้จางลง(@blue, 10%) 0%, @blue 100%); /*โอเปร่า*/
พื้นหลัง: -ms-linear-gradient(ด้านบน, จางลง(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
พื้นหลัง: การไล่ระดับสีเชิงเส้น (ด้านบน, จางลง (@blue, 10%) 0%, @blue 100%); /*W3C*/
สี: #fff;
ข้อความเงา: 0 -1px 1px rgba (0,0,0,0.4);
}
ฟังก์ชั่น "lighten" จะทำให้สีสว่างขึ้นตามตัวอักษรในระดับเปอร์เซ็นต์ ในกรณีนี้ ฟังก์ชันจะทำให้สีน้ำเงินหลักสว่างขึ้น 10% วิธีการนี้ช่วยให้คุณสามารถเปลี่ยนสีขององค์ประกอบไล่ระดับและองค์ประกอบอื่นๆ ที่มีสีเดียวกันได้ เพียงแค่เปลี่ยนสีฐานเอง สิ่งนี้สามารถให้อำนาจที่สำคัญแก่คุณในกระบวนการเคลียร์สินค้า นอกจากนี้ หากคุณใช้ฟังก์ชันพาราเมตริก (เช่นเดียวกับที่อธิบายไว้ข้างต้น) คุณสามารถทำให้คำนำหน้าเบราว์เซอร์ของคุณง่ายขึ้นโดยเปลี่ยนให้เป็น ".linear-gradient(lighten(@blue), @blue, 100% ;"

ในทางกลับกัน คุณจะได้รับเอฟเฟกต์ที่ค่อนข้างดี:

นี่คือวิธีที่เราได้ปุ่มส่งที่สวยงามตามตัวแปร

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

เงื่อนไขและการควบคุม

อีกสิ่งที่ค่อนข้างมีประโยชน์ที่นำเสนอใน LESS ด้วย Sass คุณจะสามารถใช้ if ( ) else ( ) แบบมีเงื่อนไขเช่นเดียวกับ for ( ) loops ได้ รองรับตัวดำเนินการ "และ", "หรือ" และ "ไม่ใช่" รวมถึง "", "=" และ "=="

/* ตัวอย่างคำสั่ง "if" ของ Sass */
@if ความสว่าง($สี) > 30% (
สีพื้นหลัง: #000;
) @อื่น (
สีพื้นหลัง: #fff;
}

/* ตัวอย่าง Sass "สำหรับ" วนซ้ำ */
@สำหรับ $i จาก 1px ถึง 10px (
.border-#(i) (
เส้นขอบ: $i สีน้ำเงินทึบ;
}
}
เนมสเปซ

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

#ค่าเริ่มต้น (
.nav_list() (
รายการสไตล์: ไม่มี;
ระยะขอบ: 0; ช่องว่างภายใน: 0;
}
.ปุ่ม() (…)
.อ้าง () ( … )
}
ต่อไป ในโค้ดของเรา ถ้าเราพบองค์ประกอบ "ul" ภายในองค์ประกอบ "nav" เราจะรู้ว่าเราจำเป็นต้องมีรูปแบบเริ่มต้น ดังนั้นเราจึงสามารถนำไปใช้ได้อย่างง่ายดาย

นาวูล (
#ค่าเริ่มต้น > .nav_list;
}
ขอบเขต (คำนึงถึงกรอบ)

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

@สี: #00c; /* สีฟ้า */

#ส่วนหัว (
@สี: #c00; /* สีแดง */

เส้นขอบ: 1px ทึบ @color; /* จะมีเส้นขอบสีแดง */
}

#ส่วนท้าย (
เส้นขอบ: 1px ทึบ @color; /* จะมีเส้นขอบสีน้ำเงิน */
}
เนื่องจากเราประกาศตัวแปรอีกครั้งในตัวเลือก "#header" ค่าที่อยู่หน้าตัวแปรนั้นจะแตกต่างออกไปและจะใช้ได้ภายในตัวเลือกนั้นเท่านั้น สิ่งใดก็ตามที่อยู่ก่อนหรือหลังจะคงความหมายของคำประกาศดั้งเดิมไว้

ขอบเขตใน Sass นั้นแตกต่างออกไปเล็กน้อย ในโค้ดข้างต้น เมื่อตัวแปร "@color" เปลี่ยนเป็น "สีแดง" จะถูกตีความตามที่อยู่ในโค้ด

ความคิดเห็น

ส่วนนี้ค่อนข้างง่าย ความคิดเห็นที่ถูกต้องมีสองประเภทใน LESS ความคิดเห็น CSS มาตรฐาน “/* comment */” ถูกต้องและจะได้รับการประมวลผลแล้วนำเสนอ ความคิดเห็นบรรทัดเดียว "//ความคิดเห็น" ก็ใช้งานได้เช่นกัน แต่จะไม่สะท้อนหรือส่งออก ดังนั้นจึงอาจเรียกได้ว่าเป็น "เงียบ"

นำเข้า

การนำเข้ายังค่อนข้างมีมาตรฐาน มาตรฐาน "@import: "classes.less";" ทำงานได้ค่อนข้างดี อย่างไรก็ตาม หากคุณนำเข้าไฟล์ LESS อื่น นามสกุลไฟล์จะเป็นทางเลือก ดังนั้น "@import "classes";" ก็จะทำงานได้ดีเช่นกัน หากคุณต้องการนำเข้าบางสิ่งที่ไม่มีขั้นตอนการประมวลผลเป็น LESS คุณสามารถใช้ส่วนขยาย .css (เช่น "@import: "reset.css";")

การแก้ไขสตริง

ข้อมูลสตริงยังสามารถใช้ในตัวแปรและเรียกภายในสไตล์โดยใช้ "@(name)"

@base_url = "http://coding.smashingmagazine.com";
ภาพพื้นหลัง: url("@(base_url)/images/พื้นหลัง.png");
หลบหนี

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

ระดับ(
ตัวกรอง: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* จริงๆ แล้วจะได้ผลลัพธ์ออกมาดังนี้: */
.ระดับ(
ตัวกรอง: progid: DXImageTransform.Microsoft.Alpha (ความทึบ = 20);
}
การประเมินจาวาสคริปต์

นี่เป็นหนึ่งในส่วนที่ฉันชอบที่สุดเกี่ยวกับการทำงานกับ LESS: การใช้จาวาสคริปต์ในรูปแบบต่างๆ เป็นเรื่องง่ายมาก คุณสามารถใช้นิพจน์และอ้างอิงถึงฟังก์ชันสภาพแวดล้อมการพัฒนาได้โดยใช้เครื่องหมายย้อนกลับ (`)

@string: `"เป็นอย่างไรบ้าง".toUpperCase()`; /* @string กลายเป็น "HOWDY" */

/* คุณสามารถใช้การแก้ไขที่กล่าวถึงก่อนหน้านี้ด้วย: */
@string: "สวัสดี";
@var: ~`"@(string)".topUpperCase()`; /* กลายเป็น "HOWDY" */

/* ที่นี่เราเข้าถึงส่วนหนึ่งของเอกสาร */
@height = `document.body.clientHeight`;
การจัดรูปแบบเอาต์พุต

แม้ว่า LESS จะไม่มีตัวเลือกเอาต์พุต แต่ Sass มีเอาต์พุต 4 เวอร์ชัน ได้แก่ แบบแยกส่วน กะทัดรัด บีบอัด และขยาย

บรรทัดล่าง

ห้องสมุดที่ยอดเยี่ยมทั้งสองแห่งนี้มีความคล้ายคลึงกันหลายประการ ทั้งสองเป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักออกแบบที่พัฒนาโค้ด และยังช่วยให้นักพัฒนาทำงานได้อย่างมีประสิทธิภาพและรวดเร็วยิ่งขึ้นอีกด้วย หากคุณเป็นแฟนของ Ruby หรือ HAML Sass เหมาะสำหรับคุณอย่างแน่นอน สำหรับฉัน (และฉัน. นักพัฒนา PHPและจาวาสคริปต์) ฉันยังคงใช้ LESS เนื่องจากการผสานรวมและเข้าถึงนิพจน์จาวาสคริปต์และคุณลักษณะของเอกสารได้ง่ายกว่ามาก ฉันสงสัยว่าฉันเคยใช้ทักษะการเขียนโปรแกรมที่จริงจังใดๆ มาก่อนในขณะที่ออกแบบสไตล์ชีท แต่ฉันคิดว่ามันคุ้มค่าที่จะลอง หากคุณเคยใช้ทั้งสองห้องสมุด เรายินดีรับฟังความคิดเห็นและคำแนะนำของคุณ! ทรัพยากรของเรายินดีรับความคิดเห็นเสมอ!