Sass - คำถามสัมภาษณ์

SASS (Syntactically Awesome Stylesheet) เป็นตัวประมวลผลล่วงหน้า CSS ซึ่งช่วยลดการทำซ้ำด้วย CSS และประหยัดเวลา เป็นภาษาส่วนขยาย CSS ที่เสถียรและมีประสิทธิภาพมากขึ้นซึ่งอธิบายรูปแบบของเอกสารได้อย่างหมดจดและมีโครงสร้าง

• เป็นภาษาประมวลผลล่วงหน้าซึ่งจัดเตรียมไวยากรณ์ที่เยื้อง (ไวยากรณ์ของตัวเอง) สำหรับ CSS

• ช่วยให้การเขียนโค้ดมีประสิทธิภาพมากขึ้นและดูแลรักษาง่าย

• เป็นชุด CSS ที่ยอดเยี่ยมซึ่งมีคุณสมบัติทั้งหมดของ CSS และเป็นตัวประมวลผลล่วงหน้าแบบโอเพ่นซอร์สซึ่งเข้ารหัสในรูปแบบ Ruby.

• ให้รูปแบบเอกสารในรูปแบบโครงสร้างที่ดีกว่า CSS แบบแบน

• มันใช้วิธีที่ใช้ซ้ำได้คำสั่งเชิงตรรกะและฟังก์ชันบางอย่างในตัวเช่นการจัดการสีคณิตศาสตร์และรายการพารามิเตอร์

• มีความเสถียรมีประสิทธิภาพและเข้ากันได้กับเวอร์ชันของ CSS

• เป็นชุด CSS ที่ยอดเยี่ยมและขึ้นอยู่กับ JavaScript

• เป็นที่รู้จักกันในชื่อ syntactic sugar สำหรับ CSS ซึ่งช่วยให้ผู้ใช้อ่านหรือแสดงสิ่งต่างๆได้ชัดเจนขึ้น

• ใช้ไวยากรณ์ของตัวเองและรวบรวมเป็น CSS ที่อ่านได้

• คุณสามารถเขียน CSS โดยใช้โค้ดน้อยลงได้ภายในเวลาอันสั้น

• เป็นตัวประมวลผลล่วงหน้าแบบโอเพ่นซอร์สซึ่งตีความเป็น CSS

• อนุญาตให้เขียน CSS ที่สะอาดในโครงสร้างการเขียนโปรแกรม

• ช่วยในการเขียน CSS ได้เร็วขึ้น

• เป็นส่วนเหนือของ CSS ซึ่งช่วยให้นักออกแบบและนักพัฒนาทำงานได้อย่างมีประสิทธิภาพและรวดเร็วยิ่งขึ้น

• เนื่องจาก Sass เข้ากันได้กับ CSS ทุกเวอร์ชันเราจึงสามารถใช้ไลบรารี CSS ที่มีอยู่ได้

• เป็นไปได้ที่จะใช้ไวยากรณ์ที่ซ้อนกันและฟังก์ชันที่มีประโยชน์เช่นการปรับแต่งสีคณิตศาสตร์และค่าอื่น ๆ

• นักพัฒนาต้องใช้เวลาในการเรียนรู้คุณสมบัติใหม่ ๆ ที่มีอยู่ในตัวประมวลผลล่วงหน้านี้

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

• มีโอกาสที่จะสูญเสียประโยชน์ของตัวตรวจสอบองค์ประกอบในตัวของเบราว์เซอร์

SASS รองรับสองไวยากรณ์คือ SCSS และ Indented ไวยากรณ์

• SCSS (Sassy CSS)เป็นส่วนขยายของไวยากรณ์ CSS ที่ช่วยให้ดูแลสไตล์ชีตขนาดใหญ่ได้ง่ายขึ้นและสามารถจดจำไวยากรณ์เฉพาะของผู้ขายและ CSS จำนวนมากได้ ไฟล์ SCSS ใช้นามสกุล.scss.

• Indented เป็นไวยากรณ์ที่เก่ากว่าและบางครั้งเรียกว่าเป็น Sass. การใช้ไวยากรณ์รูปแบบนี้ CSS สามารถเขียนได้อย่างกระชับ ไฟล์ SASS ใช้นามสกุล.sass.

คุณสามารถใช้ SASS ได้สามวิธี -

• เป็นเครื่องมือบรรทัดคำสั่ง

• เป็นโมดูล Ruby

• เป็นปลั๊กอินสำหรับกรอบการเปิดใช้งานแร็ค

การทำรังเป็นการรวมโครงสร้างตรรกะที่แตกต่างกัน เมื่อใช้ SASS เราสามารถรวมกฎ CSS หลาย ๆ กฎเข้าด้วยกัน หากคุณใช้ตัวเลือกหลายตัวคุณสามารถใช้ตัวเลือกหนึ่งภายในอีกตัวเลือกหนึ่งเพื่อสร้างตัวเลือกผสม

คุณสามารถเลือกตัวเลือกหลักโดยใช้ &ตัวละคร. จะบอกตำแหน่งที่ควรแทรกตัวเลือกหลัก

SASS รองรับตัวเลือกตัวยึดโดยใช้classหรือid selector ใน CSS ปกติจะระบุด้วย "#" หรือ "."แต่ใน SASS จะถูกแทนที่ด้วย"%".

มีการดำเนินการ 5 ประเภท -

• จำนวนการดำเนินการ

• การทำงานของสี

• การดำเนินการสตริง

• การดำเนินการบูลีน

• รายการปฏิบัติการ

ช่วยให้สามารถดำเนินการทางคณิตศาสตร์เช่นการบวกการลบการคูณและการหาร

อนุญาตให้ใช้ส่วนประกอบสีร่วมกับการคำนวณทางคณิตศาสตร์

รายการแสดงชุดของค่าที่คั่นด้วยเครื่องหมายจุลภาคหรือช่องว่าง

คุณสามารถดำเนินการบูลีนบนสคริปต์ Sass โดยใช้และหรือไม่ใช่ตัวดำเนินการ

วงเล็บคือเครื่องหมายคู่ซึ่งมักจะถูกทำเครื่องหมายด้วยวงเล็บกลม () หรือวงเล็บเหลี่ยม [] ซึ่งให้ตรรกะเชิงสัญลักษณ์ที่มีผลต่อลำดับของการดำเนินการ

จัดเตรียมตัวแปร SassScript ในตัวเลือกและชื่อคุณสมบัติโดยใช้ #{ }ไวยากรณ์ คุณสามารถระบุตัวแปรหรือชื่อคุณสมบัติภายในวงเล็บปีกกา

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

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

ตั้งกฎลักษณะเป็นสื่อประเภทต่างๆ

ใช้เพื่อแบ่งปันกฎและความสัมพันธ์ระหว่างตัวเลือก สามารถขยายสไตล์คลาสอื่นทั้งหมดในคลาสเดียวและยังสามารถใช้สไตล์เฉพาะของตัวเองได้อีกด้วย

เป็นชุดของกฎที่ซ้อนกันซึ่งสามารถสร้างบล็อกสไตล์ที่รากของเอกสารได้

ใช้เพื่อเลือกรันคำสั่งรหัสตามผลลัพธ์ของการประเมินนิพจน์

คำสั่ง @else if ถูกใช้กับคำสั่ง @if เมื่อใดก็ตามที่คำสั่ง @if ล้มเหลวจากนั้นคำสั่ง @else if จะถูกลองและหากพวกเขาล้มเหลวด้วยเช่นกันระบบจะเรียกใช้ @else

ช่วยให้คุณสร้างสไตล์แบบวนซ้ำ ตัวแปรตัวนับถูกใช้เพื่อตั้งค่าเอาต์พุตสำหรับการวนซ้ำแต่ละครั้ง

ในคำสั่ง @ แต่ละตัวแปรจะถูกกำหนดซึ่งมีค่าของแต่ละรายการในรายการ

ใช้เพื่อกำหนดมิกซ์อินที่มีตัวแปรและอาร์กิวเมนต์ที่เป็นทางเลือกหลังชื่อของมิกซ์อิน

ใช้เพื่อรวม mixin ในเอกสารและสไตล์ที่กำหนดโดย mixin สามารถรวมไว้ในกฎปัจจุบันได้

ค่า SassScript สามารถใช้เป็นอาร์กิวเมนต์ใน mixins ซึ่งจะได้รับเมื่อรวม mixin และพร้อมใช้งานเป็นตัวแปรภายใน mixin

อาร์กิวเมนต์มิกซ์อินมีสองประเภท -

• อาร์กิวเมนต์คำหลัก

• อาร์กิวเมนต์ตัวแปร

ใช้เพื่อรวมอาร์กิวเมนต์ในมิกซ์อิน อาร์กิวเมนต์ที่ตั้งชื่อสามารถส่งผ่านในลำดับใดก็ได้และสามารถละเว้นค่าเริ่มต้นของอาร์กิวเมนต์ได้

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

การใช้คำสั่งฟังก์ชันคุณสามารถสร้างฟังก์ชันของคุณเองและใช้ในบริบทสคริปต์ของคุณหรือสามารถใช้กับค่าใดก็ได้

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

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

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

รูปแบบ CSS ขนาดกะทัดรัดสามารถแข่งขันได้ใช้พื้นที่น้อยกว่า Expanded และ Nested เน้นที่ตัวเลือกเป็นหลักมากกว่าคุณสมบัติของมัน

สไตล์ CSS ที่บีบอัดใช้พื้นที่น้อยที่สุดเมื่อเทียบกับสไตล์อื่น ๆ ทั้งหมด จัดเตรียมช่องว่างเฉพาะเพื่อแยกตัวเลือกและขึ้นบรรทัดใหม่ที่ท้ายไฟล์

• มันใช้การเยื้องมากกว่า{ และ } เพื่อคั่นบล็อก

• งบที่แยกจากกันจะใช้การขึ้นบรรทัดใหม่แทนอัฒภาค (;)

• การประกาศทรัพย์สินและตัวเลือกจะต้องวางไว้ในบรรทัดและงบของตัวเองภายใน{ และ }ต้องวางอยู่บนบรรทัดใหม่และเยื้อง

• มันใช้การเยื้องมากกว่า{ และ } เพื่อคั่นบล็อก

• งบที่แยกจากกันจะใช้การขึ้นบรรทัดใหม่แทนอัฒภาค (;)

• การประกาศทรัพย์สินและตัวเลือกจะต้องวางไว้ในบรรทัดและงบของตัวเองภายใน{ และ }ต้องวางอยู่บนบรรทัดใหม่และเยื้อง

คุณสมบัติ CSS สามารถประกาศได้สองวิธี -

• คุณสมบัติสามารถประกาศได้คล้ายกับ CSS แต่ไม่มี semicolon(;).

• colon(:) จะมีคำนำหน้าชื่อทุกคุณสมบัติ

คุณสามารถใช้ = for @mixin directive และ + สำหรับ @include directive ซึ่งต้องพิมพ์น้อยลงและทำให้โค้ดของคุณง่ายขึ้นและอ่านง่ายขึ้น

sass - นาฬิกา C: \ ruby ​​\ lib \ sass \ style.scss: style.css

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

อินพุต sass.scss output.css

• ขั้นแรกให้ตรวจสอบ Unicode byte การประกาศ@charsetถัดไปจากนั้นการเข้ารหัสสตริง Ruby

• ถัดไปถ้าไม่มีอะไรตั้งแล้วจะมีการพิจารณาการเข้ารหัส charset เป็นUTF-8

• กำหนดการเข้ารหัสอักขระอย่างชัดเจนโดยใช้การประกาศ@charset เพียงใช้ "@charset encoding name" ที่ส่วนต้นของสไตล์ชีตและ SASS จะถือว่าเป็นการเข้ารหัสอักขระที่กำหนด

• หากไฟล์เอาต์พุตของ SASS มีอักขระที่ไม่ใช่ ASCII ไฟล์จะใช้การประกาศ@charset

Sass รองรับความคิดเห็นสองประเภท -

• Multiline comments- สิ่งเหล่านี้เขียนโดยใช้ / * และ * / ความคิดเห็นหลายบรรทัดจะถูกเก็บรักษาไว้ในเอาต์พุต CSS

• Single line comments - สิ่งเหล่านี้เขียนโดยใช้ //ตามด้วยความคิดเห็น ความคิดเห็นบรรทัดเดียวจะไม่ถูกเก็บรักษาไว้ในเอาต์พุต CSS

ประเมินนิพจน์ SassScript โดยใช้บรรทัดคำสั่ง คุณสามารถรันเชลล์ด้วยบรรทัดคำสั่ง sass พร้อมกับ - iตัวเลือก

ตรวจจับข้อผิดพลาดและแสดงค่านิพจน์ SassScript ไปยังสตรีมเอาต์พุตข้อผิดพลาดมาตรฐาน

แสดงค่านิพจน์ SassScript เป็นข้อผิดพลาดร้ายแรง