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

เรียนผู้อ่านเหล่านี้ SASS Interview Questions ได้รับการออกแบบมาเป็นพิเศษเพื่อให้คุณคุ้นเคยกับลักษณะของคำถามที่คุณอาจพบในระหว่างการสัมภาษณ์ในหัวข้อนั้น ๆ 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 เป็นข้อผิดพลาดร้ายแรง

Next คืออะไร?

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

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